如何将数据从JSON加载到Highchart？ [英] How to load data from JSON to Highchart?
问题描述
我的 Json 看起来像这样：
[{1332879360000.0：300.0，1332797760000.0：353.0，
1332799320000.0：358.0，1332879780000.0：302.0，
1332800160000.0：359.0，1332880200000.0：299.0，
1332880620000.0：298.0，1332881040000.0：301.0，
1332881460000.0：402.0，1332880020000.0 ：330.0，
1332882300000.0：466.0，1332796620000.0：519.0，
1332800520000.0：447.0，1332797460000.0：359.0，
1332801000000.0：442.0}]
我想在Highchart中显示这些数据，X -axis是日期格式，
（JSON中的1332801000000.0），Y轴是数据（300.0在JSON中），
就像一个点一样。
我注意到Highchart.com有一个演示，它运行的是实时数据。我复制那个，但我不想活泼地展现。只需立即显示这些点，并制作图表。任何解决方案我对JavaScript不太熟悉。但我认为这可能会使用相同的方法。
< script type =text / javascript>
var chart; //全局
$ b $ **
*从服务器请求数据，将它添加到图中并设置一个超时以再次请求
* /
function requestData（ ）{
$ .ajax（{
url：'/ get_data'，
成功：函数（点）{
var series = chart.series [0]，
shift = series.data.length> 20; //如果该系列长于20，则转换
//添加点
chart.series [0] .addPoint（eval（点），true，shift）;
//在一秒钟后再次调用
setTimeout（requestData，5000）;
}，
cache ：false
}）;
$ b $（document）.ready（function（）{
chart = new Highcharts.Chart（{
chart：{
renderTo：' test'，
defaultSeriesType：'spline'，
events：{
load：requestData
}
}，
title：{
text ：'实时随机数据'
}，
xAxis：{
类型：'datetime'，
tickPixelInterval：150，
maxZoom：20 * 1000
}，
yAxis：{
minPadding：0.2，
maxPadding：0.2，
title：{
text：'Value'，
margin：80
}
}，
系列：[{
name：'Random data'，
data：[]
}]
}）;
}）;
< / script>
这是一个解决方案的最小工作示例。您可以使用Object.keys和Array.prototype.map解析数据对象，最后您想使用Array.prototype.sort对数据进行排序。
const json = [{
1332879360000.0：300.0，
1332797760000.0：353.0，
1332799320000.0：358.0，
1332879780000.0 ：302.0，
1332800160000.0：359.0，
1332880200000.0：299.0，
1332880620000.0：298.0，
1332881040000.0：301.0，
1332881460000.0 ：402.0，
1332880020000.0：330.0，
1332882300000.0：466.0，
1332796620000.0：519.0，
1332800520000.0：447.0，
1332797460000.0 ：359.0，
1332801000000.0：442.0
}]
const选项= {
xAxis：{type：'datetime'}，
series ：[{
//从您的json对象获取键的数组
data：Object.keys（json [0]）
//将键映射到x和y值的数组$ b $ $ b .map（（key）=> [Number（key），json [0] [key]]）
// Sor你的数据
.sort（（a，b）=> a [0] - b [0]），
}]
}
const chart = Highcharts.chart（'container'，options）;
现场示例： https://jsfiddle.net/33hd8jog/
我还创建了一个使用从服务器获取数据的示例：
const url ='https://rawgit.com/stpoa /7d44ff0db61515dae80ad021b7c6c01a/raw/800735764d6596512a5fbc69acad019ed0416d8f/data.json'
window.fetch（url）.then（response => response.json（））。then（json => {
const options = {
xAxis：{type：'datetime'}，
series：[{
//从您的json对象中获取键的数组
data：Object.keys（ json [0]）
//将你的键映射到x和y值的数组
.map（（key）=> [Number（key），json [0] [key]]）$ （b，b）=> a [0] - b [0]），
}]
}
const chart = Highcharts.chart（'container'，options）
}）
现场示例： https://jsfiddle.net/gxb6j2tz/
my Json looks like this:
[{"1332879360000.0": 300.0, "1332797760000.0": 353.0,
"1332799320000.0": 358.0, "1332879780000.0": 302.0,
"1332800160000.0": 359.0, "1332880200000.0": 299.0,
"1332880620000.0": 298.0, "1332881040000.0": 301.0,
"1332881460000.0": 402.0, "1332880020000.0": 330.0,
"1332882300000.0": 466.0, "1332796620000.0": 519.0,
"1332800520000.0": 447.0, "1332797460000.0": 359.0,
"1332801000000.0": 442.0}]
And I want to show those data in Highchart, with X-axis is date format,
("1332801000000.0" in JSON) and Y-axis is data (300.0 in JSON),
just like a point.
I notice there is a demo in Highchart.com, and it is run live data. I copy that, but I don't want to show lively. Just show those points at once,and make up a chart. Any solution? I'm not very familiar with JavaScript. But I think this may use the same method.
<script type="text/javascript">
var chart; // global
/**
* Request data from the server, add it to the graph and set a timeout to request again
*/
function requestData() {
$.ajax({
url: '/get_data',
success: function(point) {
var series = chart.series[0],
shift = series.data.length > 20; // shift if the series is longer than 20
// add the point
chart.series[0].addPoint(eval(point), true, shift);
// call it again after one second
setTimeout(requestData, 5000);
},
cache: false
});
}
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'test',
defaultSeriesType: 'spline',
events: {
load: requestData
}
},
title: {
text: 'Live random data'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150,
maxZoom: 20 * 1000
},
yAxis: {
minPadding: 0.2,
maxPadding: 0.2,
title: {
text: 'Value',
margin: 80
}
},
series: [{
name: 'Random data',
data: []
}]
});
});
</script>
Here is a minimal working example of a solution. You can parse your data object using Object.keys and Array.prototype.map, at the end you want to sort your array of data with Array.prototype.sort.
const json = [{
"1332879360000.0": 300.0,
"1332797760000.0": 353.0,
"1332799320000.0": 358.0,
"1332879780000.0": 302.0,
"1332800160000.0": 359.0,
"1332880200000.0": 299.0,
"1332880620000.0": 298.0,
"1332881040000.0": 301.0,
"1332881460000.0": 402.0,
"1332880020000.0": 330.0,
"1332882300000.0": 466.0,
"1332796620000.0": 519.0,
"1332800520000.0": 447.0,
"1332797460000.0": 359.0,
"1332801000000.0": 442.0
}]
const options = {
xAxis: { type: 'datetime' },
series: [{
// Get array of keys from your json object
data: Object.keys(json[0])
// Map your keys to arrays with x and y values
.map((key) => [Number(key), json[0][key]])
// Sort your data
.sort((a, b) => a[0] - b[0]),
}]
}
const chart = Highcharts.chart('container', options);
Live example: https://jsfiddle.net/33hd8jog/
[EDIT]
I also created an example using data fetching from server:
const url = 'https://rawgit.com/stpoa/7d44ff0db61515dae80ad021b7c6c01a/raw/800735764d6596512a5fbc69acad019ed0416d8f/data.json'
window.fetch(url).then(response => response.json()).then(json => {
const options = {
xAxis: { type: 'datetime' },
series: [{
// Get array of keys from your json object
data: Object.keys(json[0])
// Map your keys to arrays with x and y values
.map((key) => [Number(key), json[0][key]])
// Sort your data
.sort((a, b) => a[0] - b[0]),
}]
}
const chart = Highcharts.chart('container', options)
})
Live example: https://jsfiddle.net/gxb6j2tz/
这篇关于如何将数据从JSON加载到Highchart？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
