Canvas.js除非刷新，否则不会绘制图表
我正在基于GPS跟踪收集的驾驶员行为来构建追溯工具。该工具将限制用户仅查看分配给他们的组织。每层显示一个图表（CanvasJs）。单击图表部分可深入到新图表。图层从0（顶部）开始，当前从3（底部）结束
- 甜甜圈图。 EventType /计数，即：EventType：X
- 条形图。具有选定事件类型计数的驱动程序，即：名称，X事件。
- 散点图。期间中所有驱动程序EventType事件。即：每个点代表时间线上的一个事件
- 折线图。车辆速度与时间的关系。我们在事件前后添加了一个时间偏移以显示上下文。目前2分钟的支架。
第3层当前引起问题。
- Ajax从.net core 2.0 mvc页面请求数据。
- 回调已触发。数据返回（我可以在检查工具中看到它）。
- 已将其分配给chartOption [i]对象的数据部分
- chartOption [i]通过其构造函数分配给图表。
- 然后告知该图表进行渲染。
- 图表具有正确的Y轴，并带有单位。 X轴具有正确的标签，但没有单位。中心为空白。
-
更改日期将强制刷新。
$('#processDate').change(function(e) { param.datePassedIn = e.target.value; doAjax(layer.current); }); -
第3层实际上没有使用日期。它仅需要eventId。这就是事件保持不变的原因。
- 图表主体正确显示。
- X轴更改为显示值，但显示的是标签值，而不是X值。
第3层图表选项
所有图表选项都在一个数组对象中，索引是图层ID。
var chartOptions = [
{
[snip]
},
{
[snip]
},
{
[snip]
},
{ //layer 3
cursor: "pointer",
title: {
text: orgCode + " Events",
fontSize: 30
},
subtitles: [{
text: "{EventType} Events {EventId} for Driver {DriverId}", // this comes from the MVC now
fontSize: 15
}],
axisY: {
title: "Speed",
stripLines: {},
minimum: 0,
maximum: 130
},
axisX: {
title: "Time",
labelAngle: 90,
labelAutoFit: false,
interval: 1,
intervalType: "minute",
valueFormatString: "HH:mm:ss",
minimum: periodStart,
maximum: periodEnd
},
data: [
{
type: "line",
//click: layer3ClickHandler, //we're not clicking down. at the bottom.
dataPoints: []
}
]
}
];
ajaxOptionas和doAjax函数
var ajaxOptions = [
{
url: "DriverBehaviour/GetLayer0",
callback : layer0CallbackHandler
},
{
url: "DriverBehaviour/GetLayer1",
callback : layer1CallbackHandler
},
{
url: "DriverBehaviour/GetLayer2",
callback : layer2CallbackHandler
},
{
url: "DriverBehaviour/GetLayer3",
callback : layer3CallbackHandler
}
];
//AJAX call based on current layer. Returns to designated callback handler (in options)
function doAjax(layerIndex) {
logObjectAsJson(ajaxOptions[layerIndex], "ajaxOptions[" + layerIndex + "]");
logObjectAsJson(param, "param");
hideErrorText();
$.ajax({
type: "GET",
cache: false,
dataType: "json",
url: ajaxOptions[layerIndex].url,
data: param,
success: function (response) {
showErrorText(response);
ajaxOptions[layerIndex].callback(response);
},
complete : function () {
console.log("Ajax call complete");
}
});
}
第3层回调处理程序
它的工作是为图表准备任何数据，以及其他任何渲染选项。它还会发出一个HTML列表和表格。
function layer3CallbackHandler(data) {
console.log("func start layer3CallbackHandler");
console.log("Current Layer: " + layer.current);
/******** Prepare chart **********/
chartOptions[layer.current].axisX.minimum = formatDateInputLong(new Date(data.periodStart));
console.log("min date: " + chartOptions[layer.current].axisX.minimum);
chartOptions[layer.current].axisX.maximum = formatDateInputLong(new Date(data.periodEnd));
console.log("max date: " + chartOptions[layer.current].axisX.maximum);
chartOptions[layer.current].data[0].dataPoints = [];
$.each(data.dataPoints, function (key, value) {
chartOptions[layer.current].data[0].dataPoints.push({
label: value["label"],
x: new Date(value["Xdate"]),
y: value["y"],
color: value["color"],
name: value["name"]
});
});
chartOptions[layer.current].subtitles[0].text = data.chartSubTitle;
chart = new CanvasJS.Chart("chartContainer", chartOptions[layer.current]);
logObjectAsJson(chart, "chart");
chart.render();
$("#processDate").disabled = true; //disable the date picker - date not used on layer 3
$("#backButton").show();
$("#tableContainer").empty();
$("#tableContainer").append("<h2>Event Details</h2>");
layer3emitList(data.tableData[0]);
layer3emitTable(data.tableData);
console.log("func end layer3CallbackHandler");
}
图表对象
这是在渲染之前记录的图表对象。它是chartOptions[3]和从Ajax查询返回并合并到layer3CallbackHandler
chart
{
"options": {
"cursor": "pointer",
"title": {
"text": "HVO Events",
"fontSize": 30
},
"subtitles": [
{
"text": "Driving w/o Seatbelt Event 4484051 for Driver Wayne Hicks",
"fontSize": 15
}
],
"axisY": {
"title": "Speed",
"stripLines": {},
"minimum": 0,
"maximum": 130
},
"axisX": {
"title": "Time",
"labelAngle": 90,
"labelAutoFit": false,
"interval": 1,
"intervalType": "minute",
"valueFormatString": "HH:mm:ss",
"minimum": "2019-12-01 06:50:41",
"maximum": "2019-12-01 06:53:05"
},
"data": [
{
"type": "line",
"dataPoints": [
{
"label": "Start up",
"x": "2019-11-30T19:50:41.000Z",
"y": 0,
"color": "black",
"name": "06:50:41"
},
{
"label": "Seatbelt; (GPS Unlock)",
"x": "2019-11-30T19:50:43.000Z",
"y": 0,
"color": "black",
"name": "06:50:43"
},
{
"label": "Seatbelt; (GPS Unlock)",
"x": "2019-11-30T19:50:45.000Z",
"y": 0,
"color": "black",
"name": "06:50:45"
},
{
"label": "Seatbelt",
"x": "2019-11-30T19:50:50.000Z",
"y": 0,
"color": "black",
"name": "06:50:50"
},
{
"label": "Seatbelt",
"x": "2019-11-30T19:50:55.000Z",
"y": 15,
"color": "red",
"name": "06:50:55"
},
{
"label": "Seatbelt",
"x": "2019-11-30T19:51:00.000Z",
"y": 19,
"color": "red",
"name": "06:51:00"
},
{
"label": "Seatbelt",
"x": "2019-11-30T19:51:05.000Z",
"y": 14,
"color": "red",
"name": "06:51:05"
},
{
"label": "Driving",
"x": "2019-11-30T19:51:10.000Z",
"y": 28,
"color": "black",
"name": "06:51:10"
},
{
"label": "Driving",
"x": "2019-11-30T19:51:15.000Z",
"y": 22,
"color": "black",
"name": "06:51:15"
},
{
"label": "Driver Tag Presented",
"x": "2019-11-30T19:51:15.000Z",
"y": 22,
"color": "black",
"name": "06:51:15"
},
{
"label": "Driving",
"x": "2019-11-30T19:51:20.000Z",
"y": 40,
"color": "black",
"name": "06:51:20"
},
{
"label": "Driving",
"x": "2019-11-30T19:51:25.000Z",
"y": 46,
"color": "black",
"name": "06:51:25"
},
{
"label": "Driving",
"x": "2019-11-30T19:51:30.000Z",
"y": 35,
"color": "black",
"name": "06:51:30"
},
{
"label": "Driving",
"x": "2019-11-30T19:51:35.000Z",
"y": 49,
"color": "black",
"name": "06:51:35"
},
{
"label": "Driving",
"x": "2019-11-30T19:51:40.000Z",
"y": 39,
"color": "black",
"name": "06:51:40"
},
{
"label": "Driving",
"x": "2019-11-30T19:51:44.000Z",
"y": 28,
"color": "black",
"name": "06:51:44"
},
{
"label": "Driving",
"x": "2019-11-30T19:51:45.000Z",
"y": 28,
"color": "black",
"name": "06:51:45"
},
{
"label": "Driving",
"x": "2019-11-30T19:51:50.000Z",
"y": 23,
"color": "black",
"name": "06:51:50"
},
{
"label": "Driving",
"x": "2019-11-30T19:51:55.000Z",
"y": 42,
"color": "black",
"name": "06:51:55"
},
{
"label": "Driving",
"x": "2019-11-30T19:52:00.000Z",
"y": 55,
"color": "black",
"name": "06:52:00"
},
{
"label": "Driving",
"x": "2019-11-30T19:52:05.000Z",
"y": 55,
"color": "black",
"name": "06:52:05"
},
{
"label": "Driving",
"x": "2019-11-30T19:52:10.000Z",
"y": 49,
"color": "black",
"name": "06:52:10"
},
{
"label": "Driving",
"x": "2019-11-30T19:52:15.000Z",
"y": 53,
"color": "black",
"name": "06:52:15"
},
{
"label": "Driving",
"x": "2019-11-30T19:52:20.000Z",
"y": 53,
"color": "black",
"name": "06:52:20"
},
{
"label": "Driving",
"x": "2019-11-30T19:52:24.000Z",
"y": 34,
"color": "black",
"name": "06:52:24"
},
{
"label": "Driving",
"x": "2019-11-30T19:52:25.000Z",
"y": 29,
"color": "black",
"name": "06:52:25"
},
{
"label": "Driving",
"x": "2019-11-30T19:52:30.000Z",
"y": 35,
"color": "black",
"name": "06:52:30"
},
{
"label": "Driving",
"x": "2019-11-30T19:52:35.000Z",
"y": 39,
"color": "black",
"name": "06:52:35"
},
{
"label": "Driving",
"x": "2019-11-30T19:52:40.000Z",
"y": 38,
"color": "black",
"name": "06:52:40"
},
{
"label": "Driving",
"x": "2019-11-30T19:52:44.000Z",
"y": 31,
"color": "black",
"name": "06:52:44"
},
{
"label": "Driving",
"x": "2019-11-30T19:52:45.000Z",
"y": 31,
"color": "black",
"name": "06:52:45"
},
{
"label": "Driving",
"x": "2019-11-30T19:52:50.000Z",
"y": 27,
"color": "black",
"name": "06:52:50"
},
{
"label": "Driving",
"x": "2019-11-30T19:52:55.000Z",
"y": 23,
"color": "black",
"name": "06:52:55"
},
{
"label": "Driving",
"x": "2019-11-30T19:53:00.000Z",
"y": 20,
"color": "black",
"name": "06:53:00"
},
{
"label": "Driving",
"x": "2019-11-30T19:53:05.000Z",
"y": 23,
"color": "black",
"name": "06:53:05"
}
]
}
]
}
}
小型控制台日志记录功能
使用JSON.stringify漂亮地打印到控制台上
function logObjectAsJson(object, name) {
var str;
if (name == undefined) {
str = JSON.stringify(object, null, 4);
}
else {
str = name + "\n" + JSON.stringify(object, null, 4);
}
console.log(str);
}
最后，我将最新的构建部署到this site
- 为什么图表无法正确显示？
- 什么导致X索引在重新加载时移至标签？
0 个答案:
没有答案
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？