图表js——对时间尺度数据集使用update（）

Question

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

update（） 启动一个以图表元素.determine数据限制方法结尾的跟踪：

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

因为我的数据中没有标签元素 - 每个数据集都有自己的标签，并且时间刻度标签是自动生成的 - 上面的代码有效地阻止了我在时间缩放图表上使用uped（）。

我尝试了结合使用< code > destroy()/< code > clear()和< code>render()来解决这个问题，但这导致了< code>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）.控制器未定义。

我试图做的是：

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

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

3）重新渲染折线图。

似乎< code>new Chart(context，config)构造函数是实际呈现时间刻度折线图的唯一方法。

我的质询分为两部分：

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

B） 无论 （A） 的答案如何，有没有其他方法可以做到这一点，而不会完全删除图表及其数据，并在其位置上呈现一个新图表？

Answer 1

简短的回答：我将原始图表保存为一个对象变量，我可以在其上调用 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数据结构的方法。

从那以后，只需为适当的事件触发< code > updateTimeScaleChart()即可。