Javascript 除非刷新图表，否则Canvasjs不会绘制图表

我正在构建一个基于GPS跟踪收集的驾驶员行为的深入工具。该工具将限制用户仅查看分配给他们的组织。每层显示一个图表（CanvasJs）。单击图表部分可深入到新图表。图层从0（顶部）开始，当前在3（底部）结束

甜甜圈图表。ie:EventType:X的事件类型/计数

条形图。具有所选事件类型计数的驱动程序，即：名称，X个事件。

散点图。期间中的所有驱动程序EventType事件。ie：每个点代表时间线上的一个事件

折线图。车辆速度与时间的关系。我们包括事件前后的时间偏移以显示上下文。目前为2分钟括号。 第3层目前正在引发问题

• Ajax从.NETCore2.0MVC页面请求数据
• 将触发回调。数据返回（我可以在检查工具中看到。）
• 它被分配给chartOption[i]对象的数据部分
• chartOption[i]通过其构造函数分配给图表
• 然后告诉该图表进行渲染
• 图表具有正确的Y轴，带有单位。X轴具有正确的标签，但没有单位。中间是空白的

• 更改日期会强制刷新

  $('#processDate').change(function(e) {
      param.datePassedIn = e.target.value;
      doAjax(layer.current);
  });
  

• 第3层实际上不使用日期。它只需要eventId。这就是为什么事件保持不变

• 图表主体显示正确
• X轴将更改为显示值，但显示的是标签值，而不是X值

---

第三层图表选项

所有图表选项都在一个数组对象中，索引是图层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");
        }
    });
}

第三层回调处理程序

它的工作是为图表准备任何数据，以及任何其他渲染选项。它还发出一个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");
}

小型控制台记录功能

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");
        }
    });
}

使用

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);
}

最后，我将最新的构建部署到

为什么图表显示不正确

是什么导致X索引在重新加载时移动到标签

---

尝试将

“x”：“2019-11-30T19:53:05.000Z”

更改为

“x”：新日期（“2019-11-30T19:53:05.000Z”），

对不起，我正在休年假。图表对象中的x值是

x:new Date（值[“Xdate]”）的结果。

asp集合根据类型返回

x

或

Xdate

。