在HighCharts中绘制JSON数据时遇到问题
[英]Having Trouble Plotting JSON Data in HighCharts
问题描述
I am currently pulling data that I want to plot as a simple are chart on my page. 
我目前正在提取要绘制为页面上简单图表的数据。 So far my code looks like this: 到目前为止，我的代码如下所示：
var test = [{'minute': '09:30', 'close': 286.54}, {'minute': '09:45', 'close': 285.93}, {'minute': '10:00', 'close': 284.915}, {'minute': '10:15', 'close': 284.435}, {'minute': '10:30', 'close': 284.96}, {'minute': '10:45', 'close': 284.33}, {'minute': '11:00', 'close': 284.1}, {'minute': '11:15', 'close': 283.29}, {'minute': '11:30', 'close': 283.32}, {'minute': '11:45', 'close': 283.21}, {'minute': '12:00', 'close': 283.25}, {'minute': '12:15', 'close': 283.52}, {'minute': '12:30', 'close': 283.17}, {'minute': '12:45', 'close': 283.245}, {'minute': '13:00', 'close': 282.9}, {'minute': '13:15', 'close': 283.21}, {'minute': '13:30', 'close': 283.13}, {'minute': '13:45', 'close': 283.18}]
Highcharts.chart('my-container', {
chart: {
type: 'area',
},
series: [{
data: test,
}] /* series */
});
However, this just returns a blank chart. 但是，这仅返回一个空白图表。 Any idea on where I am going wrong (I'm extremely new to JS)? 我对哪里出错有任何想法（我对JS非常陌生）？ Thanks 谢谢
2 个解决方案
解决方案1
0 2018-10-11 04:14:06
i am just taking 5 items from your data and display: 我只是从您的数据中显示5个项目：
<html> <head> <title>Highcharts Tutorial</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="https://code.highcharts.com/highcharts.js"></script> </head> <body> <div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div> <script language="JavaScript"> $(document).ready(function () { var chart = { type: 'bar' }; var title = { text: 'Example of your chart' }; var subtitle = { text: 'Source: Wikipedia.org' }; var xAxis = { categories: ['09:30', '09:45', '10:00', '10:15', '10:30'], title: { text: null } }; var yAxis = { min: 0, title: { text: 'unit (inches)', align: 'high' }, labels: { overflow: 'justify' } }; var tooltip = { valueSuffix: ' unit' }; var plotOptions = { bar: { dataLabels: { enabled: true } } }; var legend = { layout: 'vertical', align: 'right', verticalAlign: 'top', x: -40, y: 100, floating: true, borderWidth: 1, backgroundColor: ( (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'), shadow: true }; var credits = { enabled: false }; var series = [ { name: '09:30', data: [286.54] }, { name: '09:45', data: [285.93] }, { name: '10:00', data: [284.915] }, { name: '10:15', data: [284.435] }, { name: '10:30', data: [284.96] }, ]; //var test = [{ 'minute': '09:30', 'close': 286.54 }, // { 'minute': '09:45', 'close': 285.93 }, // { 'minute': '10:00', 'close': 284.915 }, // { 'minute': '10:15', 'close': 284.435 }, // { 'minute': '10:30', 'close': 284.96 }, // { 'minute': '10:45', 'close': 284.33 }, // { 'minute': '11:00', 'close': 284.1 }, // { 'minute': '11:15', 'close': 283.29 }, // { 'minute': '11:30', 'close': 283.32 }, // { 'minute': '11:45', 'close': 283.21 }, // { 'minute': '12:00', 'close': 283.25 }, // { 'minute': '12:15', 'close': 283.52 }, // { 'minute': '12:30', 'close': 283.17 }, // { 'minute': '12:45', 'close': 283.245 }, // { 'minute': '13:00', 'close': 282.9 }, // { 'minute': '13:15', 'close': 283.21 }, // { 'minute': '13:30', 'close': 283.13 }, // { 'minute': '13:45', 'close': 283.18 }] var json = {}; json.chart = chart; json.title = title; json.subtitle = subtitle; json.tooltip = tooltip; json.xAxis = xAxis; json.yAxis = yAxis; json.series = series; json.plotOptions = plotOptions; json.legend = legend; json.credits = credits; $('#container').highcharts(json); }); </script> </body> </html>
解决方案2
0 2018-10-11 09:47:10
The chart is blank because your data structure is incorrect, and Highcharts don't know what do deal with it. 该图表为空白，因为您的数据结构不正确，Highcharts不知道该怎么处理。 If you need to leave the data structure as it is now, then you can quickly prepare the function which will process defined data to the desired structure, eg like below: 如果您需要保留现在的数据结构，则可以快速准备该函数，它将定义的数据处理为所需的结构，例如，如下所示：
function processData(data) {
var arr = [];
data.forEach(p => {
arr.push({
name: p.minute,
y: p.close
})
})
return arr
}
Then just call that function series.data as the value of series.data : 然后只需将该函数series.data称为series.data的值series.data ：
Highcharts.chart('container', {
chart: {
type: 'area',
},
series: [{
data: processData(test),
}] /* series */
});
Live example: https://jsfiddle.net/60gs2b7c/ 实时示例： https ： //jsfiddle.net/60gs2b7c/
Kind regards! 亲切的问候！
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.