谷歌图表2堆积列和折线图

时间:2016-06-01 09:08:10

标签: javascript google-visualization

问题是我想要列0-3和4-7的2个堆叠列,然后是列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>
&#13;
&#13;
&#13;

编辑:从谷歌论坛获得了理想的结果:

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

1 个答案:

答案 0 :(得分:0)

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

寻找这样的东西?

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>