javascript - Google Chart 2 堆积柱形图和折线图

Question

问题是，我想要 2 个堆叠列作为第 0-3 列和第 4-7 列，然后为第 8 列使用一个折线图。到目前为止，我无法得到我期望的结果。我只得到一个堆叠列。

这是我到目前为止所拥有的:

JSFiddle

      google.charts.load('current', {
        'packages': ['corechart']
      });
      google.charts.setOnLoadCallback(drawVisualization);


      function drawVisualization() {
        // Some raw data (not necessarily accurate)
        var data = google.visualization.arrayToDataTable([
          ['Month', 'data1', 'data2', 'data3', 'data4', 'data1 compare', 'data2 compare', 'data3 compare', 'data4 compare', ''],
          ['1', 165, 938, 522, 998, 165, 938, 522, 998, 614.6],
          ['2', 135, 1120, 599, 1268, 165, 938, 522, 998, 682],
          ['3', 157, 1167, 587, 807, 165, 938, 522, 998, 623],
          ['4', 139, 1110, 615, 968, 165, 938, 522, 998, 609.4],
          ['5', 136, 691, 629, 1026, 165, 938, 522, 998, 569.6]
        ]);

        var options = {
          title: 'Chart',
          vAxes: [{
            title: 'foo'
          }, {
            title: 'bar'
          }],
          seriesType: 'bars',
          isStacked: true,
          legend: 'none',
          series: {
            0: {
              targetAxisIndex: 0
            },
            4: {
              targetAxisIndex: 0
            },
            8: {
              targetAxisIndex: 1,
              type: 'line'
            }
          }
        };

        var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div" style="width: 900px; height: 500px;"></div>

编辑:从谷歌论坛得到了想要的结果:

https://jsfiddle.net/dlaliberte/5yv936sr/3/

Answer 1

需要调整数据以获得两个堆栈

正在寻找类似的东西吗？

google.charts.load('current', {
  callback: function () {
    var data = google.visualization.arrayToDataTable([
      ['Month', 'data1', 'data2', 'data3', 'data4', 'data1 compare', 'data2 compare', 'data3 compare', 'data4 compare', ''],
      ['1', 165, 938, 522, 998, null, null, null, null, 614.6],
      ['2', 135, 1120, 599, 1268, null, null, null, null, 682],
      ['3', 157, 1167, 587, 807, null, null, null, null, 623],
      ['4', 139, 1110, 615, 968, null, null, null, null, 609.4],
      ['5', 136, 691, 629, 1026, null, null, null, null, 569.6],
      ['1', null, null, null, null, 165, 938, 522, 998, null],
      ['2', null, null, null, null, 165, 938, 522, 998, null],
      ['3', null, null, null, null, 165, 938, 522, 998, null],
      ['4', null, null, null, null, 165, 938, 522, 998, null],
      ['5', null, null, null, null, 165, 938, 522, 998, null]
    ]);

    var options = {
      title: 'Chart',
      vAxes: [{
        title: 'foo'
      }, {
        title: 'bar'
      }],
      seriesType: 'bars',
      isStacked: true,
      legend: 'none',
      series: {
        0: {
          targetAxisIndex: 0
        },
        4: {
          targetAxisIndex: 0
        },
        8: {
          targetAxisIndex: 1,
          type: 'line'
        }
      }
    };

    var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  },
  packages: ['corechart']
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>