Chart.js-将update（）与时间刻度数据集一起使用 [英] Chart.js -- using update() with time scale datasets

问题描述

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

Chart.js (v2.7.2) appears to render line chart axis labels dynamically for an axis that uses time scale. This creates a unique problem when using the update() method after updating your datasets.

update（）开始一个以 ChartElement.determineDataLimits 方法结尾的跟踪：

update() starts a trace that ends in the 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));
}

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

Because I have no labels element in my data -- each dataset has its own label, and the time scale labels are generated automatically -- the above code effectively prevents me from using update() on my time-scaled chart.

我尝试了 destroy（）的组合 / clear（）和 render（）来解决此问题，但这会导致 Chart.transition 中一个更奇怪的异常：

I have tried combinations of destroy()/clear() and render() to try to work around this problem, but that causes an even weirder exception in 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）。控制器未定义。

我要尝试执行的操作如下：

What I am attempting to do is the following:

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

1) Render a time scale line chart similar to the official example here: http://www.chartjs.org/samples/latest/scales/time/line-point-data.html

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

2) Retrieve entirely new data sets via AJAX

3）重新渲染折线图。

3) Re-render the line chart.

new Chart（context，config）构造函数是实际呈现时间刻度折线图的唯一方法。

It seems like the new Chart(context, config) constructor is the only way to actually render a time scale line chart.

我的问题包括两个部分：

My question has two parts:

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

A) Is this a bug, or am I doing something wrong?

B ）（A）的答案如何，是否有其他方法可以完全删除图表及其数据并在图表中绘制一个新的带状图表ace？

B) Regardless of the answer to (A), is there any other way to do this without completely removing the chart and its data and rendering a band new chart in its place?

推荐答案

简短的答案：我将原始图表保存为对象变量，可以在其中调用 destroy（）。调用 destroy（）之后，我将新图表呈现给相同的对象变量。

The short answer: I saved the original chart as an object variable upon which I can call destroy(). After calling destroy(), I render a new chart to the same object variable.

长答案（代码样本，从ES6来源提取）：

The long answer (code samples, pulled from ES6 source):

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（）。

this。 prepareTimeScaleChartData（）是一种将JSON API响应格式化为所需ChartJS数据结构的方法。

this.prepareTimeScaleChartData() is a method that formats my JSON API response into the expected ChartJS data structure.

从那里开始，只需触发 updateTimeScaleChart（）用于适当的事件。

From there, it's just a matter of triggering updateTimeScaleChart() for appropriate events.

这篇关于Chart.js-将update（）与时间刻度数据集一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！