0

我试图让这里给出的这个谷歌柱形图示例起作用。

这是我的尝试： http: //jsfiddle.net/dwNE4/ （注意：这给我加载带来了一些麻烦）

这是小提琴的内容：

HTML

<script src="http://www.google.com/jsapi"></script>

JS

google.load('visualization', '1', {packages: ['corechart']});

function drawVisualization() {
// Create and populate the data table.
var data = google.visualization.arrayToDataTable([
['Year', 'Austria', 'Belgium', 'Czech Republic', 'Finland', 'France', 'Germany'],
['2003',  1336060,   3817614,       974066,       1104797,   6651824,  15727003],
['2004',  1538156,   3968305,       928875,       1151983,   5940129,  17356071],
['2005',  1576579,   4063225,       1063414,      1156441,   5714009,  16716049],
['2006',  1600652,   4604684,       940478,       1167979,   6190532,  18542843],
['2007',  1968113,   4013653,       1037079,      1207029,   6420270,  19564053],
['2008',  1901067,   6792087,       1037327,      1284795,   6240921,  19830493]
]);

// Create and draw the visualization.
new google.visualization.ColumnChart(document.getElementById('visualization')).
draw(data,
{title:"Yearly Coffee Consumption by Country",
width:600, height:400,
hAxis: {title: "Year"}}
);
}

google.setOnLoadCallback(drawVisualization);
4

1 回答 1

6

我无法加载您的小提琴链接，但 javascript 工作正常：http: //jsfiddle.net/asgallant/7wYP2/

让 Visualization API 在 jsfiddle 上工作需要做一些事情：

  1. 在“框架和扩展”选项下，将“onload”下拉菜单更改为“no wrap - in head”或“no wrap - in body”。
  2. 在“Fiddle Options”下，取消选中“Normalized CSS”，因为这会混淆图表中的字体大小并搞砸显示。
  3. 在“外部资源”下，添加 jsapi 脚本 URL，将“?.js”附加到它的末尾（因为 jsfiddle 不会正确地将其检测为 javascript 链接，除非它以“.js”结尾）：http://www.google.com/jsapi?.js

我在上面发布的小提琴链接包含所有这些调整，因此您可以将其用作开发/测试/实验的基础。

于 2013-08-28T04:37:25.647 回答