谷歌图表创建堆叠栏,除了2"正常"酒吧

时间:2014-01-16 08:26:17

标签: charts stacked

我在创建Google图表时遇到问题。我希望在一个图表中有2个普通条和一个基于2个变量的堆积条。到目前为止我的代码下面:

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

  function drawChart() {

    var data = google.visualization.arrayToDataTable([

      ['H axis',        'Name 1',                   'Name 2',                       'Name 3',           'Name 4'],

      ['Label',         <?php echo $var1; ?>,       <?php echo $var2; ?>,       <?php echo $var3; ?>,       <?php echo $var4; ?>]

    ]);

    var options = {

      chartArea:{left:100,top:50,width:"70%",height:"70%"},
      title: 'Title',
      isStacked: false,
      series: { 0: {type: "bars", isStacked: false},
                1: {type: "bars", isStacked: false},
                2: {type: "steppedArea", isStacked: true},
                3: {type: "steppedArea", isStacked: true}},
      hAxis: {title: 'Title', titleTextStyle: {color: 'red'}},
      vAxis: {title: 'Title', titleTextStyle: {color: 'red'}}

    };

    var chart = new google.visualization.ColumnChart(document.getElementById('chart1'));

    chart.draw(data, options);

  }

我尝试在Google网页的帮助下创建一个组合图表。在Google上搜索没有给我相关结果,所以我想知道这里的专家是否可以帮助我。

这是我的第一篇文章,所以我希望我能正确地做到这一点。

提前致谢!

1 个答案:

答案 0 :(得分:2)

你应该可以通过使用堆叠条来“伪造它”,但只能为一个条形提供多个值。所以你的数据变量看起来像这样:

var data = google.visualization.arrayToDataTable([
    ['Label', 'Value 1', 'Value 2', 'Value 3'],
    ['Value 1', 25, 0, 0],
    ['Value 2', 0, 15, 10]
]);

根据您希望图表显示的方式,您必须修改其他一些显示选项,但上面应该使第一个栏成为单个栏,值为25,第二个栏将是堆积栏有两个值。

当然,您也必须设置isStacked: true