在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.