【发布时间】：2016-10-03 16:15:15
【问题描述】：
编辑：我修好了。把那两个麻烦点这样包起来
@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
}]
}...
我将数据作为小数数组和字符串数组（每个数字相同）传递。我可以通过断点运行代码并看到数组中的每个索引都被设置，所以它们不为空。当我设置：
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)
*/
}
【问题讨论】：
标签： javascript c# asp.net-mvc-5 chart.js