Chart.js——使用 update() 处理时间尺度数据集

Chart.js (v2.7.2) 似乎为使用时间刻度的轴动态渲染折线图轴标签。这在使用时产生了一个独特的问题update()更新数据集后的方法。

update()开始一个结束于的跟踪ChartElement.determineDataLimits method:

// Convert labels to timestamps
for (i = 0, ilen = chart.data.labels.length; i < ilen; ++i) {
    labels.push(parse(chart.data.labels[i], me));
}

因为我没有labels我的元素data-- 每个数据集都有自己的标签，并且时间尺度标签是自动生成的 -- 上面的代码有效地阻止了我使用update()在我的时间刻度图表上。

我尝试过组合destroy()/clear() and render()尝试解决这个问题，但这会导致更奇怪的异常Chart.transition:

    transition: function(easingValue) {
        var me = this;

        for (var i = 0, ilen = (me.data.datasets || []).length; i < ilen; ++i) {
            if (me.isDatasetVisible(i)) {
                me.getDatasetMeta(i).controller.transition(easingValue);
            }
        }

        me.tooltip.transition(easingValue);
    },

显然，me.getDatasetMeta(i).controller未定义。

我正在尝试做的是以下内容：

1）渲染一个类似于官方示例的时间刻度折线图：http://www.chartjs.org/samples/latest/scales/time/line-point-data.html http://www.chartjs.org/samples/latest/scales/time/line-point-data.html

2）通过AJAX检索全新的数据集

3）重新渲染折线图。

似乎是new Chart(context, config)构造函数是实际渲染时间刻度折线图的唯一方法。

我的问题有两个部分：

A）这是一个错误，还是我做错了什么？

B) 无论 (A) 的答案如何，是否有其他方法可以在不完全删除图表及其数据并在其位置渲染新图表的情况下执行此操作？

简短的回答：我将原始图表保存为可以调用的对象变量destroy()。打电话后destroy()，我将新图表渲染到同一对象变量。

长答案（代码示例，取自 ES6 源代码）：

updateTimeScaleChart() {
    this.timeScaleChart.destroy()
    this.drawTimeScaleChart()
},

drawTimeScaleChart() {
    this.timeScaleChart = new Chart($('#timeScaleChart'), {
        type: 'line',
        data: this.prepareTimeScaleChartData(),
        options: {
            aspectRatio: 1.25,
            title: {
                display: true,
                text: 'Measured over Time'
            },
            scales: {
                xAxes: [{
                    type: 'time',
                    scaleLabel: {
                        display: true,
                        labelString: 'Date'
                    }
                }]
            }
        }
    });
},

this.drawTimeScaleChart()当 my 组件在等待检索 JSON API 数据时最初使用空白数据呈现时调用。

this.prepareTimeScaleChartData()是一种将我的 JSON API 响应格式化为预期的 ChartJS 数据结构的方法。

从那里开始，只需触发即可updateTimeScaleChart()用于适当的事件。