Google可视化API中的正/负图表

Question

我需要生成一个像这样的图表： 具体来说，我想展示一段时间内（可以是小时、分钟等）的正值和负值，并以此展示。

我记得前几天在Google Visualization API Gallery上看到过类似的东西，但现在找不到了，而且我甚至不知道这种图表叫什么名字。

首先，你知道这种图表叫什么名字吗？这样我可能可以找到相关文档。其次，有没有办法使用Google Visualization API实现这样的图表？如果不行，是否有其他常见的Web图表解决方案可以实现这个功能？

感谢你的时间。

- Brad

Answer 1

这被称为"堆叠条形图"，可以使用Google可视化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" }
      );
}

结果如下图所示：

- Chris McAtackney

---

太棒了！我甚至没有想过可以使用负值堆栈。非常感谢您回答这个问题。 - Brad

还不能给你发放赏金，但两个小时后，你就能拿到了！ - Brad

没问题，很高兴能帮忙！ - Chris McAtackney

谢谢你的提示，我尝试了一下，但是我的条形图是水平的？为什么我的跟你的不一样呢？https://jsfiddle.net/0rrar9oq/ - almost a beginner

抱歉，我不知道 - 我是5年前写的这个答案！ - Chris McAtackney

Answer 2

使用ColumnChart替代BarChart：

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

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

- Kayne