如何更改DataTable'使用Javascript的Google Chart API
How to change the format in the DataTable's Google Chart API with Javascript
- 我想更改中DataTable中数据的格式为了使其更加灵活,图表仍然与第一个
默认值:
['Year', 'Sales', 'Expenses'],
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540]
必须是:
['Year', '2004', '2005', '2006', '2007'],
['Sales', 1000, 1170, 660, 1030],
['Expenses', 400 ,460, 1120, 540]
演示
HTML:
<div id="chart_div" style="width: 450px; height: 300px;"></div>
Javascript:
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540]
]);
var options = {
title: 'Company Performance'
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
您必须转置数组,如下所示:http://jsfiddle.net/krzysztof_safjanowski/Mw398/1/
var data = google.visualization.arrayToDataTable(transposeArray([
['Year', '2004', '2005', '2006', '2007'],
['Sales', 1000, 1170, 660, 1030],
['Expenses', 400, 460, 1120, 540]
]));
function transposeArray(array) {
return array[0].map(function (col, i) {
return array.map(function (row) {
return row[i];
});
});
}
在将数据传递给arrayToDataTable
之前,您必须以谷歌图表能够理解的格式进行准备。
Transpose–http://en.wikipedia.org/wiki/Transpose
方法map
-https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map
相关文章:
- Rails:试图在javascript(Google Charts API)中嵌入一个adv-ruby(each+迭代器
- Javascript:Google Maps API:如果地图加载在隐藏容器中,则为空白地图
- 在Javascript/Google Maps Api中将结果放入数组时出现问题
- javascript/google maps:为什么我在哪里初始化我的地图(内部与外部函数)很重要
- javascript google map setcenter and setzoom with animation
- Javascript (Google Adwords) with Excel VBA
- JavaScript Google Map 坐标验证
- Javascript Google Chrome,代码不起作用
- 如何在Javascript(Google Drive API)中保存HTTP请求中的URI
- 替换域javascript(Google Apps Script)正则表达式之前的所有内容
- JSF:Javascript google maps API - 标记获得相同的标题
- 在多边形中添加一些区域 [JavaScript:: Google Map API v3]
- PHP 查询数组到 Javascript Google Maps 迭代器
- 如何将整数变量从PHP传递到Javascript Google Chart API
- Javascript Google Calendar API将日历设置为公用
- Javascript/google闭包库中的类型转换
- Javascript Google Maps API在Web浏览器中加载,但不在Android浏览器中加载
- JavaScript: Google地图滚动
- Javascript / Google自定义搜索API -函数触发两次
- javascript/google hangouts api中的回调函数