谷歌图表 - 超过 1 个差异列

Question

在谷歌图表中，您可以创建一个 diffChart，通过在另一个前面显示 1 系列数据，可以很好地表示数据，就像这样

问题是我需要用 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 轴上的刻度等...）

请参阅以下工作 sn-ps...

以 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>