gpt4 book ai didi

javascript - 将 CSV 与 Google 图表结合使用

转载 作者:行者123 更新时间:2023-11-28 08:43:14 28 4
gpt4 key购买 nike

我正在尝试使用带有 Google 图表的 CSV 文件将其嵌入到我的网站中。这是我的代码:

//更新!这是我的新代码:

<html>
<head>
<script src="https://www.google.com/jsapi"></script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="https://jquery-csv.googlecode.com/files/jquery.csv-0.71.js"></script>
<script>
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);

function drawChart() {
$.get("https://docs.google.com/spreadsheet/pub?key=0Ao6fMN9Cw0GPdFVtZ29iYmd1cmRORU0yemYxUjE3OVE&single=true&gid=0&output=csv", function(csvString) {
var arrayData = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.castToScalar});
var data = new google.visualization.arrayToDataTable(arrayData);
var view = new google.visualization.DataView(data);
view.setColumns([0,1]);
var options = {
hAxis: {title: data.getColumnLabel(0), minValue: data.getColumnRange(0).min, maxValue: data.getColumnRange(0).max},
vAxis: {title: data.getColumnLabel(1), minValue: data.getColumnRange(1).min, maxValue: data.getColumnRange(1).max},
legend: 'none'
}
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(view, options);
});
}
</script>
</head>
<body>
<div id="chart_div"></div>
</body>
</html>

问题出在哪里?谢谢你的帮助!

最佳答案

您将从 Google 电子表格中提取 csv 格式的以下内容:

,
Jochen,2
Peter,5
Hans,2
Detlef,3
JĂĽrgen,4
Andreas,6
Martin,3

这是有效的 csv 格式,但不能用于散点图(您正在调用 google.visualization.ScatterChart() 方法)。对于散点图,您需要类似的东西:

'Age','Weight'
8,12
4,5.5
11,14
4,5
3,3.5
6.5,7

参见example at jsBin 。它在那里不起作用,因为没有 csv 文件。从那里复制代码并准备使用年龄、体重数据的testchart.csv

并且,仅加载 html 页面无法在本地工作。您需要从服务器远程启动它或从 wamp 服务器本地启动它。

这个例子的结果: enter image description here

关于javascript - 将 CSV 与 Google 图表结合使用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20237691/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com