Google Visualization API中的Postive / Negative图表 [英] Postive/Negative Chart in Google Visualization API
问题描述
我需要生成一个这样的图表:
I need to generate a chart like this one:
具体来说,我想在一段时间内显示正值和负值(可以是小时,分钟等。)并以此显示。
Specifically, I want to show both a positive value and a negative value for a time period (could be an hour, minute, etc.) and display it like this.
我可以宣誓在 Google Visualization API Gallery ,但我现在找不到它,甚至不知道这种图表是什么名字。
I could have sworn I saw something like this on the Google Visualization API Gallery the other day, but I can't find it now, and am not even sure what this kind of chart is called.
首先,你知道这种图表是什么,所以我可以找到文档吗?第二,有没有办法用Google Visualization API来实现这样的图表?如果没有,是否有另一个常见的图表解决方案为web我可以实现这个?
First, do you know what this kind of chart is called so I can possibly find documentation? Second, is there any way to implement such a chart with the Google Visualization API? If not, is there another common charting solution for web that I can achieve this with?
谢谢你的时间。
推荐答案
这被称为堆积条形图,可以使用Google Visualization API创建。
This is called a "Stacked Bar Chart", and can indeed be created with the Google Visualisation API.
只需使用isStacked属性(如下所述: http:// code .google.com / apis / visualization / documentation / gallery / barchart.html )。
Simply use the "isStacked" property (described here; http://code.google.com/apis/visualization/documentation/gallery/barchart.html).
下面是一些示例代码由Google更新以显示isStacked的使用和您的示例中的一些示例数据);
Here's some sample code (based off the default bar chart example provided by Google and updated to show the use of isStacked and some sample data from your example);
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" }
);
}
结果...
这篇关于Google Visualization API中的Postive / Negative图表的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!