Question

是否可以将THIS图表中的条形图堆叠起来像THIS图表中那样？

如果可能，请告诉我以及如何执行此操作。我必须坚持使用谷歌可视化图表。

您还可以在HERE中输入以下代码：

堆积图：

function drawVisualization() {
  // Create and populate the data table.
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Year');
  data.addColumn('number', 'Sales');
  data.addColumn({type: 'string', role: 'tooltip'});
  data.addColumn('number', 'Expenses');
  data.addColumn({type: 'string', role: 'tooltip'});
  data.addRows([
    ['2004', 1000, '1M$ sales in 2004', 400,  '$0.4M expenses in 2004'],
    ['2005', 1170, '1.17M$ sales in 2005', 460, '$0.46M expenses in 2005'],
    ['2006', 660,  '.66$ sales in 2006', 1120, '$1.12M expenses in 2006'],
    ['2007', 1030, '1.03M$ sales in 2007', 540, '$0.54M expenses in 2007']
  ]);

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

其他图表：

function drawVisualization() {
  // Create and populate the data table.
  var data = google.visualization.arrayToDataTable([
    ['Year', 'Austria', 'Belgium', 'Czech Republic', 'Finland', 'France', 'Germany'],
    ['2003',  1336060,   3817614,       974066,       1104797,   6651824,  15727003],
    ['2004',  1538156,   3968305,       928875,       1151983,   5940129,  17356071],
    ['2005',  1576579,   4063225,       1063414,      1156441,   5714009,  16716049],
    ['2006',  1600652,   4604684,       940478,       1167979,   6190532,  18542843],
    ['2007',  1968113,   4013653,       1037079,      1207029,   6420270,  19564053],
    ['2008',  1901067,   6792087,       1037327,      1284795,   6240921,  19830493]
  ]);

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

Answer 1

如果Google可视化是您项目的要求，我不知道如何执行此操作，但dimple使这种事情变得非常简单，请参阅示例here。

Answer 2

是的，可以根据需要制作条形图。在您的选项中，您需要添加此语句 isStacked:true 这是工作sample.有关更多与谷歌图表相关的查询，请查看jqfaq.com

堆叠的Google可视化图表

2 个答案: