asp.net mvc highchart linegraph json
本文关键字：linegraph json highchart mvc net asp | 更新日期: 2023-09-27 17:59:31
我正试图在以下位置获取行示例：http://www.highcharts.com/demo/line-basic/grid使用jsonresult，但不知道如何实现。
控制器代码：
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看起来是这样的：
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();
});
});
图表显示时没有错误，但也没有两行。我想这个系列的构建方式不对吧？提前感谢您的帮助。
试试这个。我正在承担项目。值是一个数组，可以用作要提供给图表的数据。
//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();
});
我想你所需要做的就是代替
options.series.push(series);
进行
options.series = series;
或者将整个数组作为单个项目推入数组
使用DotNet.Higharts，您不需要考虑如何将数据从操作方法传递到javascript。您可以在服务器端构造和绑定所有内容。以下是带有此库的Basic Line的示例：
public ActionResult BasicLine()
{
Highcharts chart = new Highcharts("chart")
.InitChart(new Chart
{
DefaultSeriesType = ChartTypes.Line,
MarginRight = 130,
MarginBottom = 25,
ClassName = "chart"
})
.SetTitle(new Title
{
Text = "Monthly Average Temperature",
X = -20
})
.SetSubtitle(new Subtitle
{
Text = "Source: WorldClimate.com",
X = -20
})
.SetXAxis(new XAxis { Categories = ChartsData.Categories })
.SetYAxis(new YAxis
{
Title = new XAxisTitle { Text = "Temperature (°C)" },
PlotLines = new[]
{
new XAxisPlotLines
{
Value = 0,
Width = 1,
Color = ColorTranslator.FromHtml("#808080")
}
}
})
.SetTooltip(new Tooltip
{
Formatter = @"function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.x +': '+ this.y +'°C';
}"
})
.SetLegend(new Legend
{
Layout = Layouts.Vertical,
Align = HorizontalAligns.Right,
VerticalAlign = VerticalAligns.Top,
X = -10,
Y = 100,
BorderWidth = 0
})
.SetSeries(new[]
{
new Series { Name = "Tokyo", Data = new Data(new object[] { 7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6 }) },
new Series { Name = "New York", Data = new Data(new object[] { -0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5 }) },
new Series { Name = "Berlin", Data = new Data(new object[] { -0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0 }) },
new Series { Name = "London", Data = new Data(new object[] { 3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8 }) }
}
);
return View(chart);
}
你也可以在这里找到很多MVC示例：http://dotnethighcharts.codeplex.com/releases/view/80650