Question

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

update()开始以ChartElement.determineDataLimits方法结尾的跟踪：

// 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元素-每个数据集都有自己的标签，并且时间刻度标签是自动生成的-上面的代码有效地阻止了我使用{{1 }}在我的时间刻度图表上。

我尝试使用update() / destroy()和clear()的组合来解决此问题，但这会在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); },是未定义的。

我要尝试的操作如下：

1）绘制类似于此处的官方示例的时间标尺折线图：http://www.chartjs.org/samples/latest/scales/time/line-point-data.html

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

3）重新渲染折线图。

似乎me.getDatasetMeta(i).controller构造函数是实际绘制时间刻度折线图的唯一方法。

我的问题分为两个部分：

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数据结构的方法。

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

Chart.js-将update（）与时间刻度数据集一起使用

1 个答案: