Блог

У меня есть линейный график, созданный с помощью 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 был значением всплывающей подсказки для графика

Вы можете скрыть 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»)