Google Chart with CSV Data：Columns error [英] Google Chart with CSV Data: Columns error
问题描述
我目前正试图将谷歌图表作为我们网站上显示实时数据的方法。我希望能够将CSV数据文件加载到图表中，并显示3行。
I'm currently attempting to utilize google charts as my method of showing live data on our site. I'm hoping to be able to load CSV data files into the chart and have it show 3 individual lines.
我的代码适用于当我只有两列CSV格式的数据如下格式：
I have code that works when I only have two columns of data in my CSV as in this format:
year,daily
2008,26.541
2009,24.748
2010,24.803
2011,25.483
2012,24.729
2013,24.413
2014,24.879
当我尝试加载超过两个图表时，出现了我的问题，这里大致是我想要的格式（Thornton.M2.csv） ：
My issue occurs when I try and load my chart with more than two, here is roughly the format I want (Thornton.M2.csv):
ID,Value,HighValue,LowValue
1,376,386,366
2,386,396,376
3,396,406,386
4,406,416,396
5,416,426,406
当我尝试使用此格式运行时，出现google图表错误
When I try and run with this format I get the google chart error
"Not enough columns given to draw the requested chart."
这里是我的html代码，其中脚本将数组字符串转换为二维数组用于数据表。
Here is my html code where the script turns the array string into a two dimensional array for use in the data table.
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<title>Google Graph and CSV</title>
<meta name="description" content="test">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="jquery.csv.min.js"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript"> // load the visualisation API
google.load('visualization', '1', { packages: ['corechart', 'controls'] });
</script>
<script type="text/javascript">
function drawVisualization() {
$.get("Thornton.M2.csv", function(csvString) {
// transform the CSV string into a 2-dimensional array
var arrayData = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.castToScalar});
// this new DataTable object holds all the data
var data = new google.visualization.arrayToDataTable(arrayData);
// CAPACITY - En-route ATFM delay - YY - CHART
var crt_ertdlyYY = new google.visualization.ChartWrapper({
chartType: 'LineChart',
containerId: 'crt_ertdlyYY',
dataTable: data,
options:{
width: 450, height: 160,
title: 'EU-wide en-route ATFM delays (year to date)',
titleTextStyle : {color: 'grey', fontSize: 11},
}
});
crt_ertdlyYY.draw();
});
}
google.setOnLoadCallback(drawVisualization)
</script>
</head>
<body>
<div id="crt_ertdlyYY"></div>
</body>
</html>
我无法理解为什么列号现在给我一个错误，如果有人可以帮忙的话
I'm having trouble understanding why the column number is giving me an error now, if anyone can help point me in the right direction I would appreciate it!
推荐答案
我意识到我仍然试图将CSV字符串解析为只有两个参数
I realized I was still attempting to parse the CSV string as only having two parameters
var arrayData = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.castToScalar});
我使用相同的语法解析了第二行条目
I've parsed the second line of entry using the same syntax here
var arrayData = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.castToScalar}, {onParseValue: $.csv.hooks.castToScalar});
对于你们中的某些人来说，这可能不是什么新鲜事，也许它会帮助别人。
Might not have been anything new to some of you, maybe it will help someone else.
这篇关于Google Chart with CSV Data：Columns error的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
