12

可能重复:
有人可以帮助我使用谷歌图表创建一个简单的垂直条形图吗?

我使用新的谷歌图表工具,我想创建堆积条形图格式。

4

1 回答 1

28

Google Developers 网站提供了有关条形图格式的一些详细信息:https ://developers.google.com/chart/interactive/docs/gallery/barchart

要制作堆叠的普通条形图,您需要使用该isStacked: true选项。您可以将以下代码复制并粘贴到图表工具游乐场以查看工作示例: http ://code.google.com/apis/ajax/playground/?type=visualization

function drawVisualization() {
  // Create and populate the data table.
  var data = google.visualization.arrayToDataTable([
    ['Year', 'Austria', 'Bulgaria', 'Denmark', 'Greece'],
    ['2003',  1336060,    400361,    1001582,   997974],
    ['2004',  1538156,    366849,    1119450,   941795],
    ['2005',  1576579,    440514,    993360,    930593],
    ['2006',  1600652,    434552,    1004163,   897127],
    ['2007',  1968113,    393032,    979198,    1080887],
    ['2008',  1901067,    517206,    916965,    1056036]
  ]);

  // Create and draw the visualization.
  new google.visualization.BarChart(document.getElementById('visualization')).
      draw(data,
           {title:"Yearly Coffee Consumption by Country",
            width:600, height:400,
            vAxis: {title: "Year"},
            hAxis: {title: "Cups"},
            isStacked: true}
      );
}

您可能还对堆积面积图感兴趣,具体取决于您尝试显示的数据。

还有一个问题给出了使用图表工具图像 API 的堆积条形图示例:JavaScript 中的条形图:堆积条形图 + 分组条形图

请注意,Google Chart Tools 的 Image Charts 部分已于 2012 年 4 月 20 日正式弃用。根据 Google 的弃用政策,图像图表仍将工作一段时间,但我建议您专注于上述交互式 HTML5+SVG 实现。

于 2012-05-04T02:47:23.507 回答