JavaScript 严重错误...将数组传递给 Charts.js 时出现语法错误 (MVC 5)

Question

编辑: 我修复了它。像这样包裹那两个麻烦点

@Html.Raw(Json.Encode(datapoints))

它开始完美运行。我会将其留给其他人查找。

另外，感谢 Reddit 和 StackOverflow 使用相同的格式，所以我可以在两者之间复制和粘贴。

原帖

我正在努力实现 Charts.js 以更易读的格式提供一些信息。我非常确信，根据我遵循的一组教程和文档，我已经正确设置了所有内容，还因为使用硬编码值进行测试表明这是有效的——只有当我尝试传递一个数组而不是硬编码值时它遇到错误(硬编码值只是 [1,2,3] 和 ["a", "b", "c"])

错误:

JavaScript critical error at line 173, column 49 in https://localhost:44300/Machines/Details/10080\n\nSCRIPT1002: Syntax error

Controller :
这是来自 Controller 的适当代码 - 它引用了一个 DataDay 类和一个 ChartDetails 类，这两个类都包含在本文的末尾

if (id == null)
{
    return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
}
Machine machine = await db.Machine.FindAsync(id);
if (machine == null)
{
    return HttpNotFound();
}
ChartDetails cd = new ChartDetails(machine, (int)period);

ViewBag.SevenNightList = cd.compileLastSevenNights();
ViewBag.ChartData = cd;
ViewBag.PeriodNightList = cd.pNightsList;
return View(machine);

查看:
这是 View 中的 htmlcs 代码，问题区域以粗体显示(错误在下一个代码块中的自动生成 View 中

...<div class="right">
    @foreach (string s in ViewBag.SevenNightList)
    {
        @Html.Raw((String)s) <br>
    }
    <br/>
    * - Data not recieved for this day
    </div>
</div>
<div>

<canvas id="myChart" width="800" height="400"></canvas>
<script>
       @{
        PFCTrackingAndTelemetry.SmallClass.ChartDetails thisChart = (PFCTrackingAndTelemetry.SmallClass.ChartDetails)ViewBag.ChartData;
        List<PFCTrackingAndTelemetry.SmallClass.DataDay> dataDayList = thisChart.pNightsDatapoints;
        dataDayList.Reverse(); //right order for the top-down list, wrong order for a chart
        decimal[] datapoints = new decimal[dataDayList.Count];
        string[] endDay = new string[dataDayList.Count];
        for (int i = 0; i < dataDayList.Count; i++)
        {
            datapoints[i] = dataDayList.ElementAt(i).LNRT;
            endDay[i] = dataDayList.ElementAt(i).EndTime.ToShortDateString();
        }
    }

        var datapointArray = **@datapoints;**
        var context = $("#myChart").get(0).getContext("2d");

        var data =
        {
        labels: **@endDay**,

        datasets:
        [{
            label: "Run Time",
            fillColor: "rgba(220,220,220,0,2)",
            strokeColor: "rgba(220,220,220,1)",
            pointColor: "rgba(220,220,220,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(220,220,220,1)",
            data: datapointArray
        }]
    }...

自动生成的 View :
这是发生错误的自动生成的 View

...<div class="right">
Run Time for 10/2/2016 12:00 PM to 10/3/2016 12:00 PM: 0.00 hours.* <br>
Run Time for 10/1/2016 12:00 PM to 10/2/2016 12:00 PM: 3.79 hours. <br>
Run Time for 9/30/2016 12:00 PM to 10/1/2016 12:00 PM: 2.93 hours. <br>
Run Time for 9/29/2016 12:00 PM to 9/30/2016 12:00 PM: 4.26 hours. <br>
Run Time for 9/28/2016 12:00 PM to 9/29/2016 12:00 PM: 3.59 hours. <br>
Run Time for 9/27/2016 12:00 PM to 9/28/2016 12:00 PM: 4.21 hours. <br>
Run Time for 9/26/2016 12:00 PM to 9/27/2016 12:00 PM: 3.85 hours. <br>
        <br/>
        * - Data not recieved for this day
    </div>
</div>
<div>

    <canvas id="myChart" width="800" height="400"></canvas>
    <script>


            var datapointArray = **System.Decimal[];** ***syntax error here***
            var context = $("#myChart").get(0).getContext("2d");

            var data =
            {
            labels: **System.String[]**,***syntax error here***

            datasets:
            [{
                label: "Run Time",
                fillColor: "rgba(220,220,220,0,2)",
                strokeColor: "rgba(220,220,220,1)",
                pointColor: "rgba(220,220,220,1)",
                pointStrokeColor: "#fff",
                pointHighlightFill: "#fff",
                pointHighlightStroke: "rgba(220,220,220,1)",
                data: datapointArray
            }]
        }...

我将数据作为小数数组和字符串数组(每个数字相同)传递。我可以使用断点运行代码，并看到数组中的每个索引都已设置，因此它们不为空。当我设置时:

var datapointArray = [1,2,3]

和

labels: ["a", "b", "c"]  

图表是完美生成的，所以它一定是关于我试图交给它的数组的东西，但调试错误并不是那么有帮助。

这是两个引用的类:

ChartDetails 类: 保存图表数据以及计算某些变量的方法

public class ChartDetails
{
    //p prefix = period based, m prefix = data from machine
    public List<DataDay> pNightsDatapoints;
    public List<string> pNightsList;
    public decimal pNightsAccumulation;
    public decimal pNightlyAverage;
    public decimal mNightlyTarget;
    public decimal mNightlyWarning;
    public Machine m;

    public ChartDetails(Machine machine, int period)
    {
        m = machine;
        if(period < 1) { period = 1; } //none of that /by0 nonsense in here
        mNightlyTarget = (decimal)m.Customer.Cust_Target;
        mNightlyWarning = (decimal)m.Customer.Cust_Threshold;
        compileNightsForPeriod(m, period); //sets pNightsList and pNightsDatapoints for the specified machine and period
        pNightsAccumulation = pNightsDatapoints.Sum(r => r.LNRT); //total run time over the period
        pNightlyAverage = pNightsDatapoints.Average(r => r.LNRT); //per night avg over the period
    }
    private void compileNightsForPeriod(Machine m, int period)
    {
        List<string> sNightsList = new List<string>();
        List<DataDay> dNightsList = new List<DataDay>();
        List<DataDay> DDays = new List<DataDay>();
        DateTime t = DateTime.Today;
        DateTime initial = new DateTime(t.Year, t.Month, t.Day, 12, 0, 0); //date of report at noon
        int daysWithRecords = 0;

        for (int i = 0; i < (period+1); i++) //creates a list of "days" (8am to 8am)
        {
            DataDay d = new DataDay();
            d.EndTime = initial.AddDays(-i);
            d.StartTime = initial.AddDays(-(i + 1));
            DDays.Add(d);
        }
        foreach (DataDay d in DDays) //sets hours to days that have records
        {
            MachineData a = (MachineData)m.MachineData.Where(x => x.MD_Occurence < d.EndTime && x.MD_Occurence > d.StartTime).LastOrDefault();
            if (a != null) //if a record exists within the "day"
            {
                d.maxHM1 = (decimal)m.MachineData.Where(x => x.MD_Occurence < d.EndTime && x.MD_Occurence > d.StartTime).Last().MD_HM1;
                d.HadRecord = true;
                daysWithRecords++;
            }
            else
            {
                d.HadRecord = false;
            }
        }

        if (daysWithRecords == 0)
        {
            foreach (DataDay d in DDays)
            {
                d.maxHM1 = (decimal)m.Mach_HM1;
                d.LNRT = 0;
            }
        }
        else
        {
            if (!DDays.ElementAt(period).HadRecord) //if the last element (not part of the week but used as a book end) doesn't have a record, assign it the record of the last piece of data we got before that day
            {
                MachineData a = m.MachineData.Where(x => x.MD_Occurence > DDays.ElementAt(period).StartTime).First();
                DDays.ElementAt(period).HadRecord = true;
                DDays.ElementAt(period).maxHM1 = (decimal)a.MD_HM1;
                DDays.ElementAt(period).EndTime = a.MD_Occurence;
            }

            for (int i = 0; i < (period+1); i++) //cycle through the list of days. 
            {
                if (!DDays.ElementAt(i).HadRecord) //If it has a record, it gets skipped.If it doesn't...
                {
                    bool keepGoing = true;
                    int z = 1;
                    while (keepGoing) //...loop through the elements preceding the null record. Set the hours equal to the prior day (going back an extra day until we find a record, or hit the bookend record)
                    {
                        if (DDays.ElementAt(i + z).HadRecord) //if the "prior" day (starts as 1 day back, but grows until it finds a record) has a record
                        {
                            DDays.ElementAt(i).maxHM1 = DDays.ElementAt(i + z).maxHM1; //set this record equal to the "prior" record found with data
                            keepGoing = false;
                        }
                        else //if yesterday, like today, doesn't have a record, go back a day further
                        {
                            z++;
                        }

                    }


                }
            }
            //at this point, every record in the list should be !null
        }

        for (int i = 0; i < period; i++)//set LNRT (Last Night Run Time) to todays HM - yesterdays HM
        {
            DDays.ElementAt(i).LNRT = DDays.ElementAt(i).maxHM1 - DDays.ElementAt(i + 1).maxHM1;
        }
        foreach (DataDay d in DDays)
        {
            dNightsList.Add(d);
            if (d.HadRecord)
            {
                sNightsList.Add("Run Time for " + d.StartTime.ToShortDateString() + " " + d.StartTime.ToShortTimeString() + " to " + d.EndTime.ToShortDateString() + " " + d.EndTime.ToShortTimeString() + ": " + d.LNRT.ToString() + " hours.");
            }
            else //same as above, but adds the astrik to denote missing data
            {
                sNightsList.Add("Run Time for " + d.StartTime.ToShortDateString() + " " + d.StartTime.ToShortTimeString() + " to " + d.EndTime.ToShortDateString() + " " + d.EndTime.ToShortTimeString() + ": " + d.LNRT.ToString() + " hours.*");

            }
        }
        sNightsList.RemoveAt(period);
        dNightsList.RemoveAt(period);
        pNightsList = sNightsList;
        pNightsDatapoints = dNightsList;
    }
}

DataDay 类: 自定义日类，允许我运行 noon-noon 并将数据附加到一天中的每个实例

public class DataDay
{
    public bool HadRecord { get; set; }
    public DateTime StartTime { get; set; }
    public DateTime EndTime { get; set; }
    public decimal maxHM1 { get; set; }
    public decimal LNRT { get; set; }

    /*
    MachineController(MC) sets endtime (static - 8am on day in question)
    MC sets starttime (static - 8am on day prior to starttime)
    */

}

Answer 1

已回答 - 查看编辑(我回答自己的问题会得到分数吗？)

像这样包裹那两个麻烦点

@Html.Raw(Json.Encode(datapoints))

它开始完美运行。我会将其留给其他人查找。