asp.net mvc的highchart线图JSON [英] asp.net mvc highchart linegraph json
本文介绍了asp.net mvc的highchart线图JSON的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我试图让行的例子在: HTTP:// WWW。 。highcharts.com/demo/line-basic/grid 用jsonresult工作,但无法弄清楚如何做到这一点。
I'm trying to get the line-example at: http://www.highcharts.com/demo/line-basic/grid working with a jsonresult, but can't figure out how to achieve this.
但是控制器代码:
public JsonResult GetLineData()
{
Dictionary<string, double[]> retVal = new Dictionary<string, double[]>();
double[] Array1 = {7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6};
retVal.Add("Tokyo", Array1);
double[] Array2 = { -0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5 };
retVal.Add("New York", Array2);
return Json(retVal.ToArray(), JsonRequestBehavior.AllowGet);
}
我jqquery看起来是这样的:
My jqquery looks like this:
var chart;
$(document).ready(function () {
var options = {
chart: {
renderTo: 'container',
defaultSeriesType: 'line',
marginRight: 130,
marginBottom: 25
},
title: {
text: 'Monthly Average Temperature',
x: -20 //center
},
subtitle: {
text: 'Source: WorldClimate.com',
x: -20
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: 'Temperature (°C)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function () {
return '<b>' + this.series.name + '</b><br/>' +
this.x + ': ' + this.y + '°C';
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
},
series: []
};
//Calls the JSON
jQuery.getJSON("GetLineData", null, function (items) {
var series = {
name: '',
data: []
};
jQuery.each(items, function (itemNo, item) {
//Get the items from the JSON and add then
//to the data array of the series
series.data.push({
name: item.Key,
data: item.Value
})
});
options.series.push(series);
//Create the chart
chart = new Highcharts.Chart(options);
chart.render();
});
});
图表显示了没有错误,也没有两行。
我猜的系列没有建造的正确方法?在此先感谢您的帮助。
The chart shows up without an error, but also without the two lines. I guess the series are not builded the right way? Thanks in advance for your help.
推荐答案
试试这个。我假设item.Value是可作为数据将被提供给图中可以使用的阵列
Try this. I am assuming item.Value is an array which can be used as data to be provided to the chart.
//Calls the JSON
jQuery.getJSON("GetLineData", null, function (items) {
var series = [];
jQuery.each(items, function (itemNo, item) {
//Get the items from the JSON and add then
//to the data array of the series
series.push({
name: item.Key,
data: item.Value
})
});
options.series = series;
//Create the chart
chart = new Highcharts.Chart(options);
chart.render();
});
这篇关于asp.net mvc的highchart线图JSON的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文