如何使用 Chart.js 在 Vue 中的時間軸的數據對象中將計算屬性與來自 JSON 的數據一起使用

Question

我正在嘗試使用 Chart.js 在 Vue 中創建一個帶有時間軸的圖表。 當我像這樣在 Data 對象中正確設置數據時，一切正常：

chartData: {
    datasets: [
        {
            backgroundColor: '#ED645A',
            borderColor: '#ED645A',
            fill: false,
            data: [
                {
                    t: new Date("1998-1-1"),
                    y: 7.1
                },
                {
                    t: new Date("1998-2-1"),
                    y: 8.4
                },
                {
                    t: new Date("1998-3-1"),
                    y: 18.5
                },
                {
                    t: new Date("1998-4-1"),
                    y: 16.2
                },
                {
                    t: new Date("1998-5-1"),
                    y: 18.4
                }
            ]
        }
    ]
},

但是，當我嘗試從 JSON 加載數據並在計算屬性中形成數據集對象時，就像這樣，它不起作用：

import pureSecondDatasetJson from "../assets/pureSecondDataset.json"

...

export default {

...

data () {
    return {
        pureSecondDataset: pureSecondDatasetJson,
        charts: [
            chartData: {
            datasets: this.foo
},

...

computed: {
    foo() {
        var plotData = []
        for (var i=0; i<this.pureSecondDataset.length; i++) {        
            plotData.push({t: new Date(this.pureSecondDataset[i].t), y: this.pureSecondDataset[i].y})
        }
        var chartData = [
            {
                backgroundColor: '#ED645A',
                borderColor: '#ED645A',
                fill: false,
                data: plotData
            }
        ];
        return chartData
    }
}

在計算中創建的對象似乎與直接放置的對象相同，為什么它不起作用？

Answer 1

您不應該嘗試從您的數據訪問計算屬性，如Vue 論壇中所述。

在計算數組之前評估數據

我建議將您的計算屬性更改為如下所示的內容，然后將其用作您的圖表數據：

foo() {
    var plotData = []
    for (var i=0; i<this.pureSecondDataset.length; i++)        
        plotData.push({t: new Date(this.pureSecondDataset[i].t), y: this.pureSecondDataset[i].y})

    return {
        chartData: {
            datasets:[{
                backgroundColor: '#ED645A',
                borderColor: '#ED645A',
                fill: false,
                data: plotData
            }]
        }
    }
}

我添加了一個小提琴來展示如何通過不使用數據中的計算屬性來做到這一點。 在制作小提琴時，我發現對於正確的折線圖，您需要為 x 值設置標簽屬性，否則您可以使用 type: scatter 和 drawLine:true 一起指定 x 和 y 值。 Chart.js - 用 X 、 Y 坐標繪制折線圖

 new Vue({ el: "#app", data: () => { return { plotData: [{ x: 1, y: 1 }, { x: 2, y: 2 }, { x: 3, y: 3 }] } }, computed: { foo() { return { type: 'scatter', data: { datasets: [{ showLine: true, label: 'My First dataset', backgroundColor: 'rgb(255, 99, 132)', borderColor: 'rgb(255, 99, 132)', data: this.plotData }] } } } }, mounted() { var ctx = document.getElementById('chart').getContext('2d'); new Chart(ctx, this.foo); } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script> <div id="app"> <canvas id="chart" width="400" height="400"></canvas> </div>