时间戳

首页 > 解决方案 > 如何使用 Chart.js 在 Vue 中将计算属性与数据对象中 JSON 的数据一起用于时间轴

javascript - 如何使用 Chart.js 在 Vue 中将计算属性与数据对象中 JSON 的数据一起用于时间轴

问题描述

我正在尝试使用 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
    }
}

在计算中创建的对象似乎与直接放置的对象相同，那么为什么它不起作用？

标签： javascriptvue.jschart.jsvue-clivue-cli-3

解决方案

您不应该尝试从数据中访问计算属性，如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>

推荐阅读