asp.net mvc highchart linegraph json

Question

私は線の例を得ようとしています：http://www.highcharts.com/demo/line-basic/gridはjsonresultで作業していますが、これを達成する方法を理解することはできません。

のcontrolerコード：

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


    }); 

チャートがエラーなしで現れ、だけでなく、二行なし。 私はシリーズが正しい方法で構築されていないと思いますか？あなたの助けを前にありがとう。私はすべてを行う必要はなく、

options.series.push(series); 

行う

options.series = series; 

または他のあなたは、配列

Answer 1

はこれを試してみてください。私は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(); 
     }); 

Answer 2

に単一の項目として配列全体をプッシュするのだと思います

Answer 3

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