JavaScript严重错误..将数组传递给Charts.js时出现语法错误(MVC 5)
本文关键字：语法 错误 MVC js 数组 严重错误 Charts JavaScript | 更新日期: 2023-09-27 18:11:30
编辑： 我修复了它
@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
控制器：
这是来自控制器的适当代码-这引用了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);
视图：
这是视图中的htmlcs代码，问题区域加粗(错误在下一个代码块中的自动生成视图中
...<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
}]
}...
自动生成的视图：
这是自动生成的视图，出现错误
...<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
}]
}...
我将数据作为一个小数数组和一个字符串数组(每个数组中的数字相同(传递。我可以运行带有断点的代码，看到数组中的每个索引都被设置好了，所以它们不是null。当我设置：
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类：自定义日类，允许我在中午运行并将数据附加到一天中的每个实例
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)
*/
}
已回答-请参阅编辑(我回答自己的问题会得到分数吗？(
包裹了这两个像一样的故障点
@Html.Raw(Json.Encode(datapoints))
它开始完美地工作。我将把这个留给其他人去寻找。