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>

突出显示/工具提示当然不能那样工作...

除了使用d3手动突出显示以外，还有其他想法吗？

Answer 1

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

如果您在饼图中突出显示了一个数据系列（一个切片），那么您希望在面积图中显示该系列的5个工具提示中的哪一个？而且，如果您点按了面积图中的一个点，您是否希望饼图显示默认的工具提示-对于蓝色切片，它将显示18.9％，而实际上您仅选择/查询了一个一小部分？

您最好使突出显示而不是工具提示同步，但是当点在面积图中也重叠时存在一个问题

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同步areachart和piechart的工具提示以显示相同的数据

1 个答案: