绑定json导致asp.net mvc 4的高位图

net mvc4 c＃razor项目我想实现dotnet highcharts。为此我创建了一个jsonresult函数来从datatable和cshtml文件中获取数据来呈现文件。

这里我的问题是1.我不知道如何将数据从json传递到视图2.如何在highcharts中显示x轴和系列的结果。

我是asp.net mvc 4和Highcharts的初学者。

CSHTML

enter code here  $(function () { debugger; $('#container').highcharts({ chart: { type: 'column' }, title: { text: 'Audience Live Data' }, subtitle: { text: 'Mainadv' }, xAxis: { categories: [mySeries] }, yAxis: { min: 0, title: { text: 'Count' } }, tooltip: { headerFormat: '{point.key}', pointFormat: '' + '', footerFormat: '
{series.name}: 
{point.y:.1f} mm
', shared: true, useHTML: true }, plotOptions: { column: { pointPadding: 0.2, borderWidth: 0 } }, series: [{ name: 'Home', data: [{ data: data }] }, { name: 'Category', data: [{ data: data }] }, { name: 'Product', data: [{ data: data }] }, { name: 'Basket', data: [{ data: data }] },{ name: 'Checkout', data: [{ data: data }] }] }); });  

脚本文件

  // the button action debugger; var url = "/AudienceLive/GetAudLiveChartData/"; $.ajax({ url: url, cache: false, Type: 'POST', success: function (myData) { var mySeries = []; for (var i =0; i < myData.length; i++) { mySeries.push([myData[i]]); } var chart = $('#container').highcharts(); chart.series[0].setData(mySeries); // chart.series[0].pointStart=; }, error: function (response) { alert("error : " + response); } });  

JsonResultfunction

  public JsonResult GetAudLiveChartData() { AudienceLiveRepo objlive=new AudienceLiveRepo (); List test=new List(); DataTable dt = objlive.GetTable(); if(dt!=null) { if(dt.Rows.Count>0) { for (int i = 0; i < dt.Rows.Count; i++) { test.Add(Convert.ToString(dt.Rows[i][0])); test.Add(Convert.ToString(dt.Rows[i][1])); test.Add(Convert.ToString(dt.Rows[i][2])); test.Add(Convert.ToString(dt.Rows[i][3])); test.Add(Convert.ToString(dt.Rows[i][4])); test.Add(Convert.ToString(dt.Rows[i][5])); } } } objlive = null; return Json(test, JsonRequestBehavior.AllowGet); } 

Answer 1

查看cshtml

 $(document).ready(function () { $.ajax({ url: "/home/ChartData", type: 'POST', dataType: 'json' }).success(function (dataChart) { var Xaxis = [];//skapa tre olika array var dataseries = []; for (var i = 0; i < dataChart.length; i++) { var items = dataChart[i]; var XcategoreisItem = items.id; var seriesData = items; Xaxis.push(XcategoreisItem); dataseries.push(seriesData); console.log(dataseries); } getchart(Xaxis, dataseries); }).error(function (er, xhr, e) { console.log("Error: ", er, xhr, e); }) }); function getchart(Xaxis, dataseries) { $('#container').highcharts({ chart: { type: 'line', zoomType: 'xy', panning: true, panKey: 'shift' }, title: { text: 'Zooming and panning' }, subtitle: { text: 'Click and drag to zoom in. Hold down shift key to pan.' }, plotOptions: { series: { dataLabels: { enabled: true, format: '{y}%', } } }, xAxis: { categories: Xaxis }, yAxis: { title: { text: 'Y axis text' }, series: [{ name: 'Id', data: dataseries }] }); }; 

HomeController的

  public ActionResult ChartData() { TbChart db = new TbChart(); var TbChartData = db.getYaxis(); return this.Json(TbChartData, JsonRequestBehavior.AllowGet); }