1

次のように、ViewModel を使用してシリーズを作成しています。

namespace AESSmart.ViewModels
{
  public class HighChartsPoint
  {
    public double x { set; get; }
    public double y { set; get; }
    public string color { set; get; }
    public string id { set; get; }
    public string name { set; get; }
  }

  public class HighChartsSeries
  {
    public List<HighChartsPoint> data { set; get; }
    public string name { set; get; }
    public string type { set; get; }
  }

  public class HomeIndexViewModel
  {
    public string HCSeries {get;set;}

    public void setChartData()
    {
      List<HighChartsSeries> allSeries = new List<HighChartsSeries>();
      List<HighChartsPoint> allPoint = new List<HighChartsPoint>();

      allPoint.Add(new HighChartsPoint { x = 49.9, y = 1 });
      allPoint.Add(new HighChartsPoint { x = 71.5, y = 2 });
      allPoint.Add(new HighChartsPoint { x = 106.4, y = 3 });
      allPoint.Add(new HighChartsPoint { x = 129.2, y = 4 });

      allSeries.Add(new HighChartsSeries { 
        data = new List<HighChartsPoint>(allPoint), 
        name = "Series 1", 
        type = "column" 
      });

      JavaScriptSerializer oSerializer = new JavaScriptSerializer();
      HCSeries = oSerializer.Serialize(allSeries);
    }
  }
}

次に、私の見解では、次のseries: @Model.HCSeriesように設定しています：

@section HeadContent {
  <script type="text/javascript">
    var chart;
    $(document).ready(function() {
      chart = new Highcharts.Chart({
        chart: {
          renderTo: "container4",
          type: "column",
        },
        series: @Model.HCSeries
      });
    });
  </script>
}

プログラムを実行すると、HighChart が表示されません。ビューソースを見ると、次のようになります。

<script type="text/javascript">
  (function ($) { // encapsulate jQuery
    var chart;
      $(document).ready(function () {
        chart = new Highcharts.Chart({
          chart: {
            renderTo: 'container4',
            type: 'column'
          },
          series: [[{&quot;data&quot;:[
            {&quot;x&quot;:49.9,&quot;y&quot;:1,&quot;color&quot;:null,&quot;id&quot;:null,&quot;name&quot;:null},
            {&quot;x&quot;:71.5,&quot;y&quot;:2,&quot;color&quot;:null,&quot;id&quot;:null,&quot;name&quot;:null},
            {&quot;x&quot;:106.4,&quot;y&quot;:3,&quot;color&quot;:null,&quot;id&quot;:null,&quot;name&quot;:null},
            {&quot;x&quot;:129.2,&quot;y&quot;:4,&quot;color&quot;:null,&quot;id&quot;:null,&quot;name&quot;:null}],
            &quot;name&quot;:&quot;Series 1&quot;,
            &quot;type&quot;:&quot;column&quot;}]]
        });
      });
  })(jQuery);
</script>

ビューに手動でデータを直接入力すると、チャートが表示されます。ただし、シリーズを動的に作成する必要があります。 グラフが表示されるようにコードを修正するにはどうすればよいですか?

4

1 に答える 1

1

&quot;これは、シリアル化された JSON に .の代わりに含まれているためだと思います"。

これを試して：

HCSeries = @Html.Raw(oSerializer.Serialize(allSeries));
于 2012-07-30T19:09:32.257 に答える