模型正/负图

Question

我需要生成像这样的一个图表：

具体来说，我想说明两个正值，一段时间负值（可能是一个小时，分钟等），并像这样显示。

我可以发誓我在前几天看到Google Visualization API Gallery上有这样的事情，但我现在找不到它，甚至不知道这种图表被称为什么。

首先，你知道这种图表被称为什么，所以我可以找到文件？其次，有没有什么方法可以用Google Visualization API来实现这样的图表？如果没有，是否有另一种通用的网络图表解决方案，我可以实现这一点？

谢谢你的时间。

Answer 1

这被称为“堆叠条形图”，并且确实可以使用Google Visualization API创建。

只需使用“isStacked”属性（在此描述; http://code.google.com/apis/visualization/documentation/gallery/barchart.html）。

下面是一些示例代码（基于Google提供的默认条形图示例，并更新为显示isStacked的使用和示例中的一些示例数据）;

function drawVisualization() { 

    var data = new google.visualization.DataTable(); 
    data.addColumn('string', 'Month'); 
    data.addColumn('number'); 
    data.addColumn('number'); 

    data.addRows(12); 

    data.setCell(0, 0, 'January'); 
    data.setCell(1, 0, 'February'); 
    data.setCell(2, 0, 'March'); 
    data.setCell(3, 0, 'April'); 
    data.setCell(4, 0, 'May'); 
    data.setCell(5, 0, 'June'); 
    data.setCell(6, 0, 'July'); 
    data.setCell(7, 0, 'August'); 
    data.setCell(8, 0, 'September'); 
    data.setCell(9, 0, 'October'); 
    data.setCell(10, 0, 'November'); 
    data.setCell(11, 0, 'December'); 

    data.setCell(0, 1, 19); 
    data.setCell(1, 1, 18); 
    data.setCell(2, 1, 20); 
    data.setCell(3, 1, 19); 
    data.setCell(4, 1, 18); 
    data.setCell(5, 1, 20); 
    data.setCell(6, 1, 19); 
    data.setCell(7, 1, 18); 
    data.setCell(8, 1, 20); 
    data.setCell(9, 1, 19); 
    data.setCell(10, 1, 18); 
    data.setCell(11, 1, 20); 

    data.setCell(0, 2, -12); 
    data.setCell(1, 2, -13); 
    data.setCell(2, 2, -11); 
    data.setCell(3, 2, -12); 
    data.setCell(4, 2, -13); 
    data.setCell(5, 2, -11); 
    data.setCell(6, 2, -12); 
    data.setCell(7, 2, -13); 
    data.setCell(8, 2, -11); 
    data.setCell(9, 2, -12); 
    data.setCell(10, 2, -13); 
    data.setCell(11, 2, -11); 
    data.setCell(0, 2, -12); 
    data.setCell(1, 2, -13); 
    data.setCell(2, 2, -11); 

    // Create and draw the visualization. 
    new google.visualization.ColumnChart(document.getElementById('visualization')). 
     draw(data, 
      {title:"S&P 500 Up/Down Performance Since 1980", 
      width:600, height:400, 
      isStacked:"true", 
      legend:"none" } 
    ); 
} 

而且结果...

Answer 2

使用的ColumnChart代替BARCHART：

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

https://jsfiddle.net/0rrar9oq/16