Как использовать вычисляемое свойство с данными из JSON в объекте данных для оси времени в Vue с помощью Chart.js

Я пытаюсь создать диаграмму с осью времени в Vue, используя Chart.js. Когда я устанавливаю данные прямо в объекте 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
    }
}

Объект, созданный в вычислении, кажется таким же, как тот, который помещается напрямую, так почему же он не работает?


javascript vue.js chart.js vue-cli vue-cli-3
person Anton    schedule 27.03.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Не следует пытаться получить доступ к вычисляемому свойству из ваших данных, как описано в Форум 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
            }]
        }
    }
}

Я добавил скрипт, чтобы показать, как это можно сделать, не используя вычисляемое свойство в данных. Пока я делал скрипку, я обнаружил, что для правильного линейного графика вам нужно иметь свойство labels для значений 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/[email protected]"></script>
<div id="app">
  <canvas id="chart" width="400" height="400"></canvas>
</div>

person Shoejep    schedule 27.03.2020
comment
Спасибо, извините, может быть, я вас не совсем понимаю, но, как мне кажется, ваше решение не меняет дальнейшего использования вычисляемого свойства. Я имею в виду, что мне все еще нужно использовать функцию данных, потому что там устанавливаются параметры диаграммы js - person Anton; 27.03.2020
comment
Я обновил свой ответ скрипкой, показывающей, что вам не нужно использовать вычисляемые данные. Надеюсь это поможет. - person Shoejep; 27.03.2020
comment
В вашем примере вы устанавливаете набор данных как статический объект в разделе данных, но мне нужно сделать это с данными из JSON через цикл - person Anton; 27.03.2020
comment
Вы можете просто заменить this.plotData на pureSecondDatasetJson.map(x => { t: new Date(xt), y: xy }); - person Shoejep; 27.03.2020