每天有多个值的条形图(Google Visualization API)

时间:2014-05-05 09:43:21

标签: javascript google-visualization

我确实遇到了一年中有几个事件的问题,我想分组。

function drawVisualization() {
// Create and populate the data table.
  var data = google.visualization.arrayToDataTable([
  ['Year', 'Austria'],
  ['2003',  1336060],
  ['2004',  1538156],
  ['2005',  1576579],
  ['2006',  1600652],
  ['2007',  1968113],
  ['2007',  1968113],
  ['2007',  1968113],
  ['2007',  1968113],
  ['2008',  1901067]
]);


// 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"}}
    );
}

此代码的结果如下:

enter image description here

是否可以自定义此结果以获得此结果?

enter image description here

如果我无法通过Google Visualization API获得此结果,那么JS-Framework是否具备此功能?

2 个答案:

答案 0 :(得分:2)

试试这个:

var data = google.visualization.arrayToDataTable([
['Year', 'Austria'],
['2003',  '', '', '1336060'],
['2004',  '', '', '1538156'],
['2005',  '', '', '1576579'],
['2006',  '', '', '1600652'],
['2007',  '1968113', '1968113', '1968113'],
['2008',  '', '', 1901067]
]);

答案 1 :(得分:2)

您正在寻找柱形图。我认为,这是一个做你想做的事的小提琴。

http://jsfiddle.net/98vT7/

var data = google.visualization.arrayToDataTable([
    ['Year', 'Austria', 'New Zealand', 'New Guinea'],
    ['2003',  1336060,0,0],
    ['2004',  1538156,0,0],
    ['2005',  1576579,0,0],
    ['2006',  1600652,0,0],
    ['2007',  1968113,1968113,1968113],
    ['2008',  1901067,0,0]]);

var options = {
    width: 600,
    height: 400,
    legend: { position: 'top', maxLines: 3 },
    bar: { groupWidth: '75%' },
    isStacked: true,
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);