javascript - 在视图中正确填充莫里斯线图

Question

我有一个莫里斯线图，看起来像这样：

 var lineGraph = Morris.Area({
                element: 'graph_line',
                xkey: 'y',
                ykeys: ['a', 'b'],
                labels: ['Sales'],
                fillOpacity: '0.7',
                gridTextFamily: 'mtsRegular',
                hideHover: 'auto',
                lineWidth: '1px',
                lineColors: ['#076178','#1ecee8'],
                pointFillColors: ['#fff'],
                pointStrokeColors: ['#012e42'],
                data: [
                    { y: '2014', a: 140, b: 30 },
                    { y: '2015', a: 225, b: 23 },
                    { y: '2016', a: 50, b: 18 },
                    { y: '2017', a: 75, b: 10 },
                    { y: '2018', a: 80, b: 4 },
                    { y: '2019', a: 90, b: 130 },
                    { y: '2020', a: 100, b: 98 },
                    { y: '2021', a: 115, b: 72 },
                    { y: '2022', a: 120, b: 44 },
                    { y: '2023', a: 145, b: 77 },
                    { y: '2024', a: 160, b: 256 }

                ],

         /*ViewBag.LineGraph*/
                /*    */

                resize: true
            });

他们在网站上提供的示例数据如下所示：

{ y: '2014', a: 140, b: 30 },
{ y: '2015', a: 225, b: 23 },
{ y: '2016', a: 50, b: 18 },
{ y: '2017', a: 75, b: 10 },
{ y: '2018', a: 80, b: 4 },
{ y: '2019', a: 90, b: 130 },
{ y: '2020', a: 100, b: 98 },
{ y: '2021', a: 115, b: 72 },
{ y: '2022', a: 120, b: 44 },
{ y: '2023', a: 145, b: 77 },
{ y: '2024', a: 160, b: 256 }

现在在我的 C# 应用程序中，我有一个具有以下属性的数据集：

public Nullable<System.DateTime> DataDate { get; set; }
public Nullable<double> RevenueForDay { get; set; }
public Nullable<int> SalesForDay { get; set; }

我正在尝试重新创建一个类似于此 JSON 的正确 JSON 字符串，如下所示：

 public string FormProperJson(byte type, List<SearchedUserGraphData> allData)
        {
            var finalJson = "";
            if (type == 0)
            {
                var doubleLineGraphData = allData.Where(y => y.type == type).ToList();

                for (int i = 0; i < doubleLineGraphData.Count; i++)
                {
                    finalJson += "{ y: '" + doubleLineGraphData[i].DataDate.Value.ToString("yyyy-MM-dd") + "', a: " + doubleLineGraphData[i].SalesForDay + ", b: " + doubleLineGraphData[i].RevenueForDay + "}";
                    if (i < doubleLineGraphData.Count)
                    {
                        finalJson += ",";
                    }
                }
                    // { y: '2014', a: 140, b: 30 }, this is how every line should look like...


            }
            return finalJson;
        }

用法如下：

  ViewBag.LineGraph = FormProperJson(0, allGraphData);

每次 for 循环迭代结束后，字符串如下所示：

"{ y: '2018-07-30', a: 33, b: 494.77},"

一旦完整的迭代完成，“finalJSON”字符串如下所示：

{ y: '2018-07-30', a: 33, b: 494.77},{ y: '2018-07-31', a: 23, b: 488.14},{ y: '2018-08-01', a: 16, b: 284.15},{ y: '2018-08-02', a: 17, b: 254.05},{ y: '2018-08-03', a: 18, b: 323.94},{ y: '2018-08-04', a: 20, b: 371.78},{ y: '2018-08-05', a: 21, b: 412.75},{ y: '2018-08-06', a: 15, b: 253.33},{ y: '2018-08-07', a: 15, b: 321.25},{ y: '2018-08-08', a: 31, b: 659.52},{ y: '2018-08-09', a: 13, b: 184.17},{ y: '2018-08-10', a: 17, b: 282.25},{ y: '2018-08-11', a: 15, b: 204.93},{ y: '2018-08-12', a: 22, b: 396.38},{ y: '2018-08-13', a: 22, b: 358.08},{ y: '2018-08-14', a: 25, b: 561.72},{ y: '2018-08-15', a: 20, b: 302.29},{ y: '2018-08-16', a: 21, b: 344.76},{ y: '2018-08-17', a: 32, b: 429.04},{ y: '2018-08-18', a: 32, b: 543.87},{ y: '2018-08-19', a: 24, b: 369.94},{ y: '2018-08-20', a: 18, b: 406.59},{ y: '2018-08-21', a: 16, b: 511.66},{ y: '2018-08-22', a: 12, b: 224.91},{ y: '2018-08-23', a: 14, b: 416.91},{ y: '2018-08-24', a: 20, b: 409.48},{ y: '2018-08-25', a: 16, b: 252.76},{ y: '2018-08-26', a: 13, b: 203.31},{ y: '2018-08-27', a: 9, b: 145.41},{ y: '2018-08-28', a: 4, b: 31.28},{ y: '2018-08-29', a: 9, b: 202.91}

但在视图中，当我尝试像这样填充图表时：

   var lineGraph = Morris.Area({
                    element: 'graph_line',
                    xkey: 'y',
                    ykeys: ['a', 'b'],
                    labels: ['Sales'],
                    fillOpacity: '0.7',
                    gridTextFamily: 'mtsRegular',
                    hideHover: 'auto',
                    lineWidth: '1px',
                    lineColors: ['#076178','#1ecee8'],
                    pointFillColors: ['#fff'],
                    pointStrokeColors: ['#012e42'],
                    data: [@ViewBag.LineGraph],
                    resize: true
                });

我在控制台中收到以下错误：

SyntaxError: expected expression, got '}'[Learn More] 
SyntaxError: expected expression, got '&'[Learn More]

我在这里做错了什么...这让我发疯了...有人可以帮帮我吗？

@AlexK 这是它在浏览器控制台中输出的内容：

{ y: '2018-07-30', a: 33, b: 494.77},{ y: '2018-07-31', a: 23, b: 488.14},{ y: '2018-08-01', a: 16, b: 284.15},{ y: '2018-08-02', a: 17, b: 254.05},{ y: '2018-08-03', a: 18, b: 323.94},{ y: '2018-08-04', a: 20, b: 371.78},{ y: '2018-08-05', a: 21, b: 412.75},{ y: '2018-08-06', a: 15, b: 253.33},{ y: '2018-08-07', a: 15, b: 321.25},{ y: '2018-08-08', a: 31, b: 659.52},{ y: '2018-08-09', a: 13, b: 184.17},{ y: '2018-08-10', a: 17, b: 282.25},{ y: '2018-08-11', a: 15, b: 204.93},{ y: '2018-08-12', a: 22, b: 396.38},{ y: '2018-08-13', a: 22, b: 358.08},{ y: '2018-08-14', a: 25, b: 561.72},{ y: '2018-08-15', a: 20, b: 302.29},{ y: '2018-08-16', a: 21, b: 344.76},{ y: '2018-08-17', a: 32, b: 429.04},{ y: '2018-08-18', a: 32, b: 543.87},{ y: '2018-08-19', a: 24, b: 369.94},{ y: '2018-08-20', a: 18, b: 406.59},{ y: '2018-08-21', a: 16, b: 511.66},{ y: '2018-08-22', a: 12, b: 224.91},{ y: '2018-08-23', a: 14, b: 416.91},{ y: '2018-08-24', a: 20, b: 409.48},{ y: '2018-08-25', a: 16, b: 252.76},{ y: '2018-08-26', a: 13, b: 203.31},{ y: '2018-08-27', a: 9, b: 145.41},{ y: '2018-08-28', a: 4, b: 31.28},{ y: '2018-08-29', a: 9, b: 202.91}

标签： javascriptjqueryasp.netasp.net-mvcmorris.js