1分鐘上手Highchart:讀取CSV, JSON資料, Google試算表

CSV

JavaScript

var csv = document.getElementById('csv').innerHTML;
// $.get('data.csv', function(csv) {
var chart = Highcharts.chart('container', {
chart: {
type: 'column'
},
data: {
csv: csv // 指定 CSV 数据
},
title: {
text: 'Fruit Consumption'
},
yAxis: {
title: {
text: 'Units'
}
}
});

HTML

<div id="container"></div>
<pre id="csv">分类,苹果,梨,橙子,香蕉
小明,8,4,6,5
小红,3,4,2,3
小张,8,7,7,7
小芳,3,16,13,15</pre>

CSS

#csv {
display: none;
}

JSON

JavaScript

var options = {
chart: {
renderTo: ‘container’,
type: ‘spline’
},
series: [{}]
};
var jsonStr = document.getElementById(‘data’).innerHTML,
jsonData = JSON.parse(jsonStr);
options.series[0].data = jsonData;
Highcharts.chart(‘container’, options);

HTML

<div id="container"></div>
<pre id="data">[
[1,12],
[2,5],
[3,18],
[4,13],
[5,7],
[6,4],
[7,9],
[8,10],
[9,15],
[10,22]
]</pre>

CSS

#data {
display: none;
}

Google Spreadsheets

JavaScript

需要指定 Google SpreadSheets 生成的 Key// Create the chart
Highcharts.chart(‘container’, {
title: {
text: ‘Highcharts data from Google Spreadsheets’
},
data: {
googleSpreadsheetKey: ‘0AoIaUO7wH1HwdENPcGVEVkxfUDJkMmFBcXMzOVVPdHc’
}
});

HTML

<div id="container"></div>

Written by

Machine Learning / Deep Learning / Python / Flutter cakeresume.com/yanwei-liu

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store