我如何将 json 数据集设置为带有 c3.js 的图表的标签

Question

我有一个使用 c3.js 和 json 数据

生成的折线图

当前图表非常简单

var chart = c3.generate({
  bindto: '.balanceChart',
  data: {
    url: '/data',
    mimeType:'json'
  }
});

json数据：

{
  data1: [1000,1240,1270,1250,1280]
  data2: [1000,240,30,-20,30]
}

图表看起来不错而且有但它目前正在绘制两组数据我想要的是 data2 成为绘图的工具提示值

Answer 1

你可以像这样隐藏data2不显示

data: {
  ...
  hide: ['data2']
}

来自http://c3js.org/reference.html#data-hide

并使用tooltip.format.value更改工具提示显示

tooltip: {
  format: {
    value: function (value, ratio, id, index) { 
          // return chart.data.values("data2")[index]; // if still wanting to use data2

          // or get rid of data2 completely using this
          var vals = chart.data.values(id); // id will be 'data1', vals will then be data1 array
          return vals[index] - (index === 0 ? 0 : vals[index - 1]);
      }
  }
}

http://c3js.org/reference.html#tooltip-format-value

tooltip.format.title 和 tooltip.format.name 在这里与用户交流也很有用，该值实际上不是 data1 的值（可能只是将标题更改为 "Delta Data1"）

我如何将 json 数据集设置为带有 c3.js 的图表的标签

how do i set json data set as labels for graph plot with c3.js

javascript

json

c3.js