vue-chartjs 反应数据错误

2022-01-22 00:00:00 vue.js chart.js vue-chartjs

我正在尝试为 vue-chartjs 使用响应式数据混合

I am trying to use reactive data mixin for vue-chartjs

设置初始数据的挂载函数正在运行，我可以使用 API 响应正确查看图表:

The mounted function to set the initial data is working and I can see the chart correctly using the API response:

fetchSessionTrends() {
    axios.get(endpoint)
    .then(({data}) => {
        this.sessions = data.map(session => session.sessions);
        this.sessionLabels = data.map(label => label.date);
        this.loaded = true;
    });
},

数据:

data() {
    return {
       endpoint: 'public/api/sessions',
       sessions: [],
       sessionLabels: [],
       loaded: false,
       daysFilter: 14
    };
},

我正在显示带有文本字段的图表以提供反应部分 - 期望它再次调用端点并接收新响应

I am display the chart with a text field to provide the reactive portion - expectation is that it calls the endpoint again and receives new response

<div class="col-md-2 session-filter">
    <div class="input-group">
    <input type="text" class="form-control" placeholder="days..." v-model="daysFilter">
    <span class="input-group-btn">
      <button class="btn btn-secondary" type="button" @click="refreshSessions">Go</button>
    </span>
    </div>
</div>
<line-chart v-if="loaded" :chart-data="sessions" :chart-labels="sessionLabels"></line-chart>

然而，为了测试反应部分，现在我只是直接更改数据数组以查看它是如何工作的:

To test the reactive part however, for now I am simply changing the data arrays directly to see how it works:

refreshSessions() {          
   this.sessions = [1, 2, 3];
   this.sessionlabels = ["june", "july", "august"];  
},

是的，所以这给了我错误

Right, so this is giving me the errors

[Vue warn]: Error in callback for watcher "chartData": "TypeError: Cannot read property 'map' of undefined" found in ....

 TypeError: Cannot read property 'map' of undefined

LineChart.js 如文档中所述，此处缩写为空格

LineChart.js is as described in the docs, abbreviated here for space

import { Line, mixins } from 'vue-chartjs';
const { reactiveProp } = mixins

extends: Line,
mixins: [reactiveProp],
props: {
 chartData: {
   type: Array,
   required: true
 },
 chartLabels: {
   type: Array,
   required: true
 }
},

mounted() {
  this.renderChart({
    labels: this.chartLabels,
    datasets: [
      {
        label: 'sessions',
        data: this.chartData
      }
    ]
  }, this.options)
}

所以，图表最初工作正常，但我似乎无法让反应部分工作.

So, chart is initially working fine but I can't seem to get the reactive part working.

推荐答案

这行不通.因为 reactiveMixins 假设 chartData 是整个 chartjs 数据集对象.使用数据集数组，使用标签等.

This will not work. Because the reactiveMixins assume that chartData is the whole chartjs dataset object. With the dataset array, with the labels etc.

但是你把它分开了，这样反应混合器就不能工作了.因为你的chartData只是一个数据集的纯数据.

But you are splitting it up, this way the reactiveMixins can't work. Because your chartData is only the pure data of one dataset.

要解决它，你可以做两件事:

To solve it, you can do two things:

  1. 传入整个数据集对象
  2. 添加自己的观察者.

我想最简单的方法是添加两个观察者来观察 chartData 和 chartLabel 并在更改调用 this.$data._chart.update()

I guess the most simple method would be to add two watchers to watch chartData and chartLabel and on a change call this.$data._chart.update()

相关文章