javascript - Google 图表 - 超过 1 个差异列

Question

在谷歌图表中，您可以创建一个 diffChart，它可以通过在其他数据之前显示一系列数据来为您提供良好的数据表示，如下所示

问题是我需要对 2 个以上的系列执行此操作，我想对最多 4 个系列执行此操作，将每个项目堆叠在彼此的前面。使用谷歌图表可以吗？我不在乎是否必须使用不同的谷歌图表来完成此任务，但我需要将 4 个系列放在一起，而不是并排

这是一个 plunkr 示例，但它仅比较前 2 个数据集

http://jsfiddle.net/Gillardo/nv8kb58y/5/

function drawChart() {
    var oldData = google.visualization.arrayToDataTable([
      ['Name', 'Popularity'],
      ['Cesar', 250],
      ['Rachel', 4200],
      ['Patrick', 2900],
      ['Eric', 8200]
    ]);

    var newData = google.visualization.arrayToDataTable([
      ['Name', 'Popularity'],
      ['Cesar', 370],
      ['Rachel', 600],
      ['Patrick', 700],
      ['Eric', 1500]
    ]);

    var thirdData = google.visualization.arrayToDataTable([
      ['Name', 'Popularity'],
      ['Cesar', 100],
      ['Rachel', 100],
      ['Patrick', 100],
      ['Eric', 100]
    ]);

    var colChartDiff = new google.visualization.ColumnChart(document.getElementById('chart_div'));
    var options = { legend: { position: 'top' } };
    var diffData = colChartDiff.computeDiff(oldData, newData);
    var diffData2 = colChartDiff.computeDiff(diffData, thirdData);
    colChartDiff.draw(diffData, options);

    console.log(diffData2);
  }

google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);

Answer 1

computeDiff 方法将仅评估两个数据集

一种选择是将多个图表堆叠在一起，
尽管这需要一些操作...

将所有图表容器放置在相同的坐标处
使用单独的图表选项来更改条形的颜色和大小
在所有图表上设置特定的vAxis.viewWindow
删除重复的标签(数据中的 x 轴、y 轴上的刻度等...)

请参阅以下工作片段...

以 3 为例

google.charts.load('current', {
  packages: ['bar', 'controls', 'corechart']
}).then(function () {
  var data0 = google.visualization.arrayToDataTable([
    ['Name', 'Popularity 0'],
    ['Cesar', 250],
    ['Rachel', 4200],
    ['Patrick', 2900],
    ['Eric', 8200]
  ]);

  var data1 = google.visualization.arrayToDataTable([
    ['Name', 'Popularity 1'],
    ['', 370],
    ['', 600],
    ['', 700],
    ['', 1500]
  ]);

  var data2 = google.visualization.arrayToDataTable([
    ['Name', 'Popularity 2'],
    ['', 1370],
    ['', 1600],
    ['', 1700],
    ['', 500]
  ]);

  var options0 = {
    backgroundColor: 'transparent',
    colors: ['red'],
    height: 400,
    legend: {
      position: 'top'
    },
    vAxis: {
      viewWindow: {
        min: 0,
        max: 10000
      }
    },
    width: 600
  };

  var options1 = {
    backgroundColor: 'transparent',
    bar: {
      groupWidth: 40
    },
    colors: ['blue'],
    height: 400,
    legend: {
      position: 'top',
      alignment: 'center'
    },
    vAxis: {
      ticks: [{v: 0, f: ''}],
      viewWindow: {
        min: 0,
        max: 10000
      }
    },
    width: 600
  };

  var options2 = {
    backgroundColor: 'transparent',
    bar: {
      groupWidth: 20
    },
    colors: ['green'],
    height: 400,
    legend: {
      position: 'top',
      alignment: 'end'
    },
    vAxis: {
      ticks: [{v: 0, f: ''}],
      viewWindow: {
        min: 0,
        max: 10000
      }
    },
    width: 600
  };

  var colChart0 = new google.visualization.ColumnChart(document.getElementById('chart_div_0'));
  var colChart1 = new google.visualization.ColumnChart(document.getElementById('chart_div_1'));
  var colChart2 = new google.visualization.ColumnChart(document.getElementById('chart_div_2'));

  colChart0.draw(data0, options0);
  colChart1.draw(data1, options1);
  colChart2.draw(data2, options2);
});

.chart {
  position: absolute;
  left: 0px;
  top: 0px;
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div class="chart" id="chart_div_0"></div>
<div class="chart" id="chart_div_1"></div>
<div class="chart" id="chart_div_2"></div>

<小时/>

以 4 为例

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data0 = google.visualization.arrayToDataTable([
    ['Name', 'Popularity 0'],
    ['Cesar', 250],
    ['Rachel', 4200],
    ['Patrick', 2900],
    ['Eric', 8200]
  ]);

  var data1 = google.visualization.arrayToDataTable([
    ['Name', 'Popularity 1'],
    ['', 370],
    ['', 600],
    ['', 700],
    ['', 1500]
  ]);

  var data2 = google.visualization.arrayToDataTable([
    ['Name', 'Popularity 2'],
    ['', 1370],
    ['', 1600],
    ['', 1700],
    ['', 500]
  ]);

  var data3 = google.visualization.arrayToDataTable([
    ['Name', 'Popularity 3'],
    ['', 1070],
    ['', 1200],
    ['', 1000],
    ['', 900]
  ]);

  var chartColors = ['#f44336', '#9c27b0', '#2196f3', '#4caf50'];

  var options0 = {
    backgroundColor: 'transparent',
    colors: [chartColors[0]],
    height: 400,
    legend: {
      position: 'top',
      alignment: 'center'
    },
    vAxis: {
      viewWindow: {
        min: 0,
        max: 10000
      }
    },
    width: 600
  };

  var options1 = {
    backgroundColor: 'transparent',
    bar: {
      groupWidth: 40
    },
    colors: [chartColors[1]],
    height: 400,
    legend: {
      position: 'top',
      alignment: 'center'
    },
    vAxis: {
      ticks: [{v: 0, f: ''}],
      viewWindow: {
        min: 0,
        max: 10000
      }
    },
    width: 600
  };

  var options2 = {
    backgroundColor: 'transparent',
    bar: {
      groupWidth: 20
    },
    colors: [chartColors[2]],
    height: 400,
    legend: {
      position: 'top',
      alignment: 'center'
    },
    vAxis: {
      ticks: [{v: 0, f: ''}],
      viewWindow: {
        min: 0,
        max: 10000
      }
    },
    width: 600
  };

  var options3 = {
    backgroundColor: 'transparent',
    bar: {
      groupWidth: 10
    },
    colors: [chartColors[3]],
    height: 400,
    legend: {
      position: 'top',
      alignment: 'center'
    },
    vAxis: {
      ticks: [{v: 0, f: ''}],
      viewWindow: {
        min: 0,
        max: 10000
      }
    },
    width: 600
  };

  var colChart0 = new google.visualization.ColumnChart(document.getElementById('chart_div_0'));
  var colChart1 = new google.visualization.ColumnChart(document.getElementById('chart_div_1'));
  var colChart2 = new google.visualization.ColumnChart(document.getElementById('chart_div_2'));
  var colChart3 = new google.visualization.ColumnChart(document.getElementById('chart_div_3'));

  google.visualization.events.addListener(colChart0, 'ready', function () {
    adjustLegend(colChart0);
  });
  google.visualization.events.addListener(colChart1, 'ready', function () {
    adjustLegend(colChart1);
  });
  google.visualization.events.addListener(colChart2, 'ready', function () {
    adjustLegend(colChart2);
  });
  google.visualization.events.addListener(colChart3, 'ready', function () {
    adjustLegend(colChart3);
  });

  colChart0.draw(data0, options0);
  colChart1.draw(data1, options1);
  colChart2.draw(data2, options2);
  colChart3.draw(data3, options3);

  function adjustLegend(chart, index) {
    var chartContainer;
    var chartId;
    var chartLabels;
    var chartLayout = chart.getChartLayoutInterface();
    var chartBounds = chartLayout.getChartAreaBoundingBox();
    var labelBounds = chartLayout.getBoundingBox('legendentry#0');
    var legendMarkers;
    var offsetX;
    var offsetY;

    switch (chart) {
      case colChart0:
        chartId = 'chart_div_0';
        offsetX = labelBounds.width * -1;
        offsetY = labelBounds.height * -1;
        break;

      case colChart1:
        chartId = 'chart_div_1';
        offsetX = labelBounds.width;
        offsetY = labelBounds.height * -1;
        break;

      case colChart2:
        chartId = 'chart_div_2';
        offsetX = labelBounds.width * -1;
        offsetY = labelBounds.height;
        break;

      case colChart3:
        chartId = 'chart_div_3';
        offsetX = labelBounds.width;
        offsetY = labelBounds.height;
        break;
    }

    chartContainer = document.getElementById(chartId);

    chartLabels = chartContainer.getElementsByTagName('text');
    Array.prototype.forEach.call(chartLabels, function(label) {
      if (label.getAttribute('text-anchor') === 'start') {
        label.setAttribute('x', parseFloat(label.getAttribute('x')) + offsetX);
        label.setAttribute('y', parseFloat(label.getAttribute('y')) + offsetY);
      }
    });

    legendMarkers = chartContainer.getElementsByTagName('rect');
    Array.prototype.forEach.call(legendMarkers, function(rect) {
      if ((chartColors.indexOf(rect.getAttribute('fill')) > -1) && (parseFloat(rect.getAttribute('y')) < chartBounds.top)) {
        rect.setAttribute('x', parseFloat(rect.getAttribute('x')) + offsetX);
        rect.setAttribute('y', parseFloat(rect.getAttribute('y')) + offsetY);
        //console.log(chartId, rect);
      }
    });
  }
});

.chart {
  position: absolute;
  left: 0px;
  top: 0px;
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div class="chart" id="chart_div_0"></div>
<div class="chart" id="chart_div_1"></div>
<div class="chart" id="chart_div_2"></div>
<div class="chart" id="chart_div_3"></div>