nvd3 LineChart工具提示不工作

nvd3 LineChart tooltip not works

本文关键字：工作 工具提示 LineChart nvd3      更新时间：2023-09-26

在这个演示中http://nvd3.org/livecode/index.html#codemirrorNav只需将数据更改为

function() {
  return [
    {
      values: [{x:23,y:9,},{x:22,y:6,},{x:21,y:6,},{x:20,y:10,},{x:19,y:19,},{x:18,y:26,},{x:17,y:30,},{x:16,y:41,},{x:15,y:49,},{x:14,y:31,},{x:13,y:48,},{x:12,y:7,},{x:11,y:26,},{x:10,y:47,},{x:9,y:35,},{x:8,y:20,},{x:7,y:25,},{x:6,y:1,},{x:0,y:1,}],
      key: 'A',
      color: '#ff7f0e'
    },
    {
      values: [{x:22,y:6,},{x:20,y:3,},{x:19,y:1,},{x:18,y:7,},{x:17,y:8,},{x:16,y:15,},{x:15,y:22,},{x:14,y:9,},{x:13,y:10,},{x:12,y:16,},{x:11,y:27,},{x:10,y:34,},{x:9,y:57,},{x:8,y:162,},{x:7,y:102,},{x:6,y:3,},{x:3,y:1,},{x:0,y:1,}],
      key: 'B',
      color: '#2ca02c'
    }
  ];
}

工具提示被打破了。为什么呢?

这是因为NVD3期望数据是有序的，如果你改变你的数据像

function() {
  return [
    {
      values: [{x:21,y:9,},{x:22,y:6,},{x:23,y:6,}],
      key: 'A',
      color: '#ff7f0e'
    },
    {
      values: [{x:21,y:6,},{x:22,y:3,},{x:23,y:1,}],
      key: 'B',
      color: '#2ca02c'
    }
  ];
}

它的工作原理。您必须在服务器端或javascript上使用。sort()

排序您的数据
相关文章：