c3js синхронизирует всплывающие подсказки areachart и piechart с одинаковыми данными - PullRequest
Новая
       36

c3js синхронизирует всплывающие подсказки areachart и piechart с одинаковыми данными

0 голосов
/ 23 ноября 2018

У меня есть круговая диаграмма и диаграмма, показывающая те же данные.На круговой диаграмме показаны сводные данные арешарта.Теперь я хочу показать всплывающую подсказку / выделить данные другого графика, если выбраны соответствующие данные.

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?

1 Ответ

0 голосов
/ 28 ноября 2018

Проблема, в логическом смысле, состоит в том, что круговая диаграмма представляет собой агрегацию диаграммы области - между ними нельзя сопоставить всплывающие подсказки для рядов данных в каждой диаграмме один к одному.

Если вы выделите ряд данных (срез) на круговой диаграмме, какие из 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();
    },

  }
});
...