c3js同步显示相同数据的面积图和饼图的工具提示

Question

我有一个饼图和一个曲线图显示相同的数据。饼图显示面积图的汇总数据。现在，如果选择了相应的数据，我想显示工具提示/突出显示另一个图表的数据。

jsfiddle: http://jsfiddle.net/gothmogg/m59poqcd/18/

我找到了我应该使用的提示

onmouseover: function (d) { 
   chart2.tooltip.show({ x: d.x });
}

作为示例，我的代码看起来像（与 jsfiddle 中的相同）

var columns = ['data1', 'data2', 'data3', 'data4'];
var data = [];
data.push([20, 40, 30, 10, 50]);
data.push([50, 50, 50, 40, 60]);
data.push([10, 40, 60, 25, 30]);
data.push([80, 60, 30, 25, 35]);


var pieChart = c3.generate({
  bindto: d3.select('#pie-chart'),
  data: {
    columns: [
      [columns[0]].concat(data[0])
    ],
    type: 'pie',
    onmouseover: function(d, i) {
      if (areaChart)
        areaChart.tooltip.show({
          x: d.x
        });
    },

  }
});

var areaChart = c3.generate({
  bindto: d3.select('#area-chart'),
  data: {
    columns: [
      [columns[0]].concat(data[0])
    ],
    type: 'area-spline',
    onmouseover: function(d, i) {
      if (pieChart)
        pieChart.tooltip.show({
          x: d.x
        });
    },

  }
});

for (i = 1; i < columns.length; i++) {
  setTimeout(function(column) {
    pieChart.load({
      columns: [
        [columns[column]].concat(data[column]),
      ]
    });
    areaChart.load({
      columns: [
        [columns[column]].concat(data[column]),
      ]
    });
  }, (i * 5000 / columns.length), i);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.6.9/c3.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.6.9/c3.min.js"></script>

<div id="area-chart"></div>
<div id="pie-chart"></div>

highlighting/tooltip 当然不是这样的...

除了使用 d3 手动突出显示之外还有什么想法吗？

Answer 1

麻烦的是，从逻辑上讲，饼图是面积图的集合 - 您无法将每个图表中数据系列的工具提示一一匹配。

如果您在饼图中突出显示数据系列（切片），您希望该系列的 5 个工具提示中的哪一个显示在面积图中？如果你在面积图中的一个点上提示工具，你会期望饼图的默认工具提示显示出来吗 - 蓝色切片会显示 18.9%，而实际上你只有 chosen/queried 一小部分呢？

您最好同步突出显示而不是工具提示，但是当面积图中的点也重叠时就会出现问题

http://jsfiddle.net/43ane5jk/1/

var pieChart = c3.generate({
  bindto: d3.select('#pie-chart'),
  data: {
    columns: [
      [columns[0]].concat(data[0])
    ],
    type: 'pie',
    onmouseover: function(d, i) {
      if (areaChart)
        areaChart.focus(d.id);
    },
    onmouseout: function(d, i) {
      if (areaChart)
        areaChart.revert();
    },

  }
});

var areaChart = c3.generate({
  bindto: d3.select('#area-chart'),
  data: {
    columns: [
      [columns[0]].concat(data[0])
    ],
    type: 'area-spline',
    onmouseover: function(d, i) {
      if (pieChart)
        pieChart.focus(d.id);
    },
    onmouseout: function(d, i) {
      if (pieChart)
        pieChart.revert();
    },

  }
});

c3js同步显示相同数据的面积图和饼图的工具提示

c3js synchronize tooltips of areachart and piechart showing the same data

javascript

tooltip

pie-chart

c3.js