json - 在 HighCharts 中使用 Json

Question

我正在使用 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>

如果我手动将数据直接输入到视图中，那么图表会显示。但是，我需要动态创建系列。 我需要做什么来修复我的代码以便图表显示？

Answer 1

我认为这是因为您的序列化 JSON 包含"而不是".

试试这个：

HCSeries = @Html.Raw(oSerializer.Serialize(allSeries));