1
我想輸出到Highstock圖表的JSON數據。最初我努力與JSON格式化的日期,我解決了通過重新格式化日期按照指令在其他答案stackoverflow。但我仍然無法獲得圖形繪製視圖頁面上 -使用JSON日期與Highstock圖表(asp.net MVC)
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var mydata =[];
chartOjb = new Object();
$.ajax({
type: "GET",
url: "/ReportIntance/DummyCall/2",
data: '{ }',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
$.each(data, function (index, item) {
chartOjb.name = new Date(parseInt(item.DayDate.replace("/Date(", "").replace(")/", ""), 10));
chartOjb.data = item.Series1;
mydata.push({
x: new Date(parseInt(item.DayDate.replace("/Date(", "").replace(")/", ""), 10)),
y: item.Series1
});
})
},
failure: function (response) {
alert(response);
}
});
chart1 = new Highcharts.Chart({
chart: {
renderTo: 'Chart1'
},
title: {
text: 'Delivery Price example using Chart'
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: 'Price'
}
},
series: [ { data: mydata }]
});
});
</script>
<div id="Chart1" style="height: 500px; min-width: 500px"></div>
我的JSON字符串是 -
[{"DayDate":"\/Date(1334704500000)\/","Series1":4.01,"Series2":0,"Series3":0,"Series4":0,"Series5":0},
{"DayDate":"\/Date(1334705400000)\/","Series1":5.01,"Series2":0,"Series3":0,"Series4":0,"Series5":0},
{"DayDate":"\/Date(1334706300000)\/","Series1":4.51,"Series2":0,"Series3":0,"Series4":0,"Series5":0},
{"DayDate":"\/Date(1334707200000)\/","Series1":6.01,"Series2":0,"Series3":0,"Series4":0,"Series5":0},
{"DayDate":"\/Date(1334708100000)\/","Series1":4.71,"Series2":0,"Series3":0,"Series4":0,"Series5":0},
{"DayDate":"\/Date(1334709000000)\/","Series1":7.01,"Series2":0,"Series3":0,"Series4":0,"Series5":0},
{"DayDate":"\/Date(1334709900000)\/","Series1":7.01,"Series2":0,"Series3":0,"Series4":0,"Series5":0}]
目前我正在試圖輸出簡單的線條圖和僅使用的DayDate(X軸)和'Series1'作爲Y軸。
高爐圖表顯示'x軸',但沒有顯示線圖或y軸。
有人能指點我做錯了什麼嗎?任何幫助將不勝感激。
編輯:
設置turboThresold
場後,我現在可以看到X軸我highstock圖表上。但是y軸的值仍然丟失。 這就是圖表看起來沒有任何y軸線的情況。這些數據似乎是正確的
這裏是我更新的代碼 -
$(function() {
var mydata = [];
chartOjb = new Object();
// See source code from the JSONP handler at https://github.com/highslide-software/highcharts.com/blob/master/samples/data/from-sql.php
$.getJSON('/ReportIntance/DummyCall/2', function (data) {
// Add a null value for the end date
//data = [].concat(data, [[Date.UTC(2013, 9, 14, 19, 59), null, null, null, null]]);
$.each(data, function (index, item) {
chartOjb.name = new Date(parseInt(item.DayDate.replace("/Date(", "").replace(")/", ""), 10));
chartOjb.data = item.Series1;
mydata.push({ x: chartOjb.name, y: parseFloat(chartOjb.data) });
//alert(chartOjb.name + "/" + chartOjb.data);
});
// create the chart
$('#container').highcharts('StockChart', {
chart: {
//type: 'candlestick',
zoomType: 'x'
},
navigator: {
adaptToUpdatedData: false,
series: {
data: mydata
}
},
scrollbar: {
liveRedraw: false
},
title: {
text: 'Historical prices from June 2012'
},
subtitle: {
text: 'Displaying 20K records using Highcharts Stock by using JSON'
},
plotOptions: {
line: {
turboThreshold: 20450
}
},
xAxis: {
type: 'datetime',
title: 'Time',
minRange: 3600 * 1000/15 // one hour
},
yAxis:{
title: {
text: 'Prices',
style: {
color: '#89A54E'
}
},
lineWidth: 1,
opposite: false,
showEmpty: false //hides empty data series
},
series: [{
data: data,
pointStart: Date.UTC(2012, 6, 1), // first of June
pointInterval: 3600 * 1000/15,
dataGrouping: {
enabled: false
}
}]
});
});
});
因此,你的「mydata」數組是如何看起來像? –
在stackoverflow上我搜索了一些關於turboThreshold的知識。由於我使用大量數據點,因此必須將其設置爲20K +。它現在顯示了HighStock圖表,但在Y軸上沒有行。但是,值在用戶可以拖動時間軸的x軸上顯示爲灰色區域。 –
問題在於你的x值,因爲解析後我發現你收到:Wed Apr 18 2012 01:15:00 GMT + 0200(CEST),但應該是時間戳(以毫秒爲單位); –