如何使用 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
    }
}

在computed中创建的对象和直接put的一样，为什么不行？

Answer 1

您不应该按照 Vue Forum.

中的说明尝试从您的数据访问计算的属性

the data is evaluated before the computed array

我建议将您的计算属性更改为如下所示的内容，然后将其用作您的图表数据：

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
            }]
        }
    }
}

我添加了一个 fiddle 来展示如何通过不在数据中使用计算的属性来做到这一点。在制作 fiddle 时，我发现对于正确的折线图，您需要为 x 值设置一个标签属性，否则您可以使用 type: scatter 和 drawLine:true 来指定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>

如何使用 Chart.js 在 Vue 时间轴的数据对象中使用计算属性和来自 JSON 的数据

How to use computed property with data from JSON in data object for time axis in Vue using Chart.js

javascript

vue.js

chart.js

vue-cli

vue-cli-3

如何使用 Chart.js 在 Vue 时间轴的数据对象中使用计算 属性 和来自 JSON 的数据

How to use computed property with data from JSON in data object for time axis in Vue using Chart.js

javascript

vue.js

chart.js

vue-cli

vue-cli-3

如何使用 Chart.js 在 Vue 时间轴的数据对象中使用计算属性和来自 JSON 的数据