在HighCharts中绘制JSON数据时遇到问题
[英]Having Trouble Plotting JSON Data in HighCharts
问题描述
我目前正在提取要绘制为页面上简单图表的数据。 到目前为止，我的代码如下所示：
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 */
});
但是，这仅返回一个空白图表。 我对哪里出错有任何想法（我对JS非常陌生）？ 谢谢
2 个解决方案
解决方案1
0 2018-10-11 04:14:06
我只是从您的数据中显示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
该图表为空白，因为您的数据结构不正确，Highcharts不知道该怎么处理。 如果您需要保留现在的数据结构，则可以快速准备该函数，它将定义的数据处理为所需的结构，例如，如下所示：
function processData(data) {
var arr = [];
data.forEach(p => {
arr.push({
name: p.minute,
y: p.close
})
})
return arr
}
然后只需将该函数series.data称为series.data的值series.data ：
Highcharts.chart('container', {
chart: {
type: 'area',
},
series: [{
data: processData(test),
}] /* series */
});
实时示例： https ： //jsfiddle.net/60gs2b7c/
亲切的问候！
通过Highcharts从MySQL获得JSON编码数据的麻烦
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.