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

您可以隐藏数据2，使其无法显示

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在这里也很有用，可以向用户传达的值实际上并不是数据1（可能只是将标题更改为＆＃34; Delta Data1＆＃34 ;）

如何使用c3.js将json数据集设置为图形图的标签

1 个答案: