如何在庫中動態顯示集合Highcharts-在MVC中將集合與Highcharts綁定

Question

在不生成圖形的情況下，調試器下來自模型的數據將正確顯示在循環中。 我向模型發送了兩個字母-期間列表和訂單列表。

//模型

  public class ChartsOrderViewModel
    {
        public List<DataInfo> ListPeriod { get; set; }
        public List<DataInfo> ListQuantity { get; set; }

    }

 public class DataInfo
    {
        public string Data { get; set; }
        public string Period { get; set; }
        public int Quantity { get; set; }



        public DataInfo()
        {
            this.Data = Data;
            this.Period  = Period;
            this.Quantity  = Quantity;


        }
    }

//控制器

  public ActionResult ChartsOrder(ChartsOrderViewModel viewModel)
            {


                List<Order> listaZlecenUzytkownika = new List<Order>();
                List<DataInfo> ListaData = new List<DataInfo>();
                List<DataInfo> ListaDataPeriod = new List<DataInfo>();
                List<DataInfo> ListaDataQuantity = new List<DataInfo>();

                ArrayList xValue = new ArrayList();
                ArrayList yValue = new ArrayList();
                ArrayList ListaxValue = new ArrayList();
                listOrderUser = db.Zlecenia.OrderBy(w => w.IdUser).ToList();
                ListData = listOrderUser.OrderBy(p => p.DateOfAcceptance).Select(w => new DataInfo { Data = w.DateOfAcceptance.ToString().Substring(0, 7) }).ToList();
                ListDataPeriod = ListData.GroupBy(c => c.Data).Select(z => new DataInfo { Period = z.Key }).ToList();
                ListDataQuantity = ListData.GroupBy(c => c.Data).Select(z => new DataInfo { Quantity = z.Count() }).ToList();
                viewModel.ListPeriod = ListDataPeriod;
                viewModel.ListQuantity = ListDataQuantity;
               // viewModel.ListPeriod.ToList().ForEach(p => xValue.Add(p.Period));
               // viewModel.ListQuantity.ToList().ForEach(p => yValue.Add(p.Quantity));
              //  ViewData["ListaOkresowCzasowych"] = viewModel.ListaIlosc;
              //  ViewData["IloscZlecenWOkresie"] = viewModel.ListaIlosc;
                return View(viewModel);
            }

//視圖

 @model  AplikacjaHelpDesk.ViewModels.ChartsOrderViewModel  
    @{
        ViewBag.Title = "Charts";
        Layout = "~/Views/Shared/_LayoutAdmin.cshtml";
    }

    <script src="~/Scripts/Highcharts-4.0.1/js/highcharts.js"></script>
    <script src="~/Scripts/Highcharts-4.0.1/js/modules/exporting.js"></script>


    <h2>Charts Bar</h2>

    <div id="chartsBar" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>
    <br />



    <script type="text/javascript">
        $(function () {
            $('#chartsBar').highcharts({
                chart: {
                    type: 'column'
                },
                title: {
                    text: 'Period orders'
                },
                subtitle: {
                    text: 'Chart'
                },
                xAxis: {
                    categories:
                  [
                   @foreach (var item in Model.ListPeriod)
                  {
                     @item.Period
                  }


                  ],
                },
                yAxis: {
                    min: 0,
                    title: {
                        text: 'Quantity'
                    }
                },
                tooltip: {
                    headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                    pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                        '<td style="padding:0"><b>{point.y:.1f}</b></td></tr>',
                    footerFormat: '</table>',
                    shared: true,
                    useHTML: true
                },
                plotOptions: {
                    column: {
                        borderWidth: 0

                    }
                },
                series: ({
                    name: 'Ilość',
                    data: [
                            @foreach (var item in Model.ListQuantity)
                                  {
                                      @item.Quantity
                                 }
                    ]
                })
            });
        });
    </script>

為了正確顯示圖形，應如何顯示視圖中的數據？即給定時間段內的訂單數。 我想問一個有關MVC Highcharts中系列數據的例子。

Answer 1

嘗試將負責生成類別的代碼更改為此：

categories:
                [
                    @{
                        var result = "";
                        foreach (var item in Model.ListPeriod)
                        {
                            result += "'" + item.Period +"',";
                        }
                        result = result.Remove(result.Length - 1);
                    }
                    @Html.Raw(result)
                ],

以及為此創建數據的塊：

data: [
              @{
                        var resultQ = "";
                foreach (var item in Model.ListQuantity)
                {
                    resultQ += item.Quantity + ",";
                }
                        resultQ = resultQ.Remove(resultQ.Length - 1);
                    }
                    @Html.Raw(resultQ)
                ]