cpa*_*cpa 12 javascript csv google-visualization
我有一个看起来像这样的csv文件:
week,value1,value2
1,2,3
2,7,9
我想使用谷歌图表绘制它的叠加图(周是我的x(水平)值,值1和值2是两组y).不幸的是,我没有找到任何简单的方法.这可能与我在js中成为一个完整的菜鸟有关.
有没有简单的方法呢？
Jon*_*age 14
所述的jquery-CSV库提供了CSV的字符串翻译成一个阵列,以通过所使用的能力google.visualization.arrayToDataTable()(例如它们的在这里).要使其工作,请将jquery.csv.js添加到您的服务器中(在下面的示例中,我假设它与您的HTML位于同一文件夹中)并链接到您的服务器<head>.以下是一个简单的脚本,您可以添加到您的<head>入门.我假设一个散点图,但此过程适用于此处的任何图表.您还需要一个<div>与id="chart"这个工作.
// load the visualization library from Google and set a listener
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
// this has to be a global function
function drawChart() {
// grab the CSV
$.get("example.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);
// this view can select a subset of the data at a time
var view = new google.visualization.DataView(data);
view.setColumns([0,1]);
// set chart options
var options = {
title: "A Chart from a CSV!",
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'
};
// create the chart object and draw it
var chart = new google.visualization.ScatterChart(document.getElementById('chart'));
chart.draw(view, options);
});
}