asp.net mvc highchart linegraph json

我想要得到行示例：http://www.highcharts.com/demo/line-basic/grid與jsonresult工作，但無法弄清楚如何實現這一點。asp.net mvc highchart linegraph json

但是控制器代碼：

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(); 
     }); 


    });

的圖表顯示了沒有錯誤，也沒有兩行。我猜這個系列沒有以正確的方式建造？在此先感謝您的幫助。

來源

2011-06-20 Jorelie

我認爲，所有你需要做的是不是

options.series.push(series);

做

options.series = series;

否則你推動整個陣列作爲單個項目到一個數組

來源

2011-06-20 13:41:48 Lourens

試試這個。我假設item.Value是一個數組，可以用作數據提供給圖表。

//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(); 
     });

來源

2011-06-20 13:55:34 ShankarSangoli

這應該工作實際 – Lourens

Highcharts系列將對象的arrary它可以有名稱，系列的類型以及是數據元素數組的數據。我在你的代碼中糾正了它，使其工作。 – ShankarSangoli

它的工作原理！非常感謝。 Jorelie。 – Jorelie

隨着DotNet.Highcharts你不需要考慮如何從操作方法的JavaScript傳遞數據。您可以在服務器端構建並綁定所有內容。下面是使用這個庫的基本路線的例子：

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

來源

2012-01-17 21:51:39 Vangi

asp.net mvc highchart linegraph json

回答

相關問題