Vue ChartJS未更新

问题描述 投票：1回答：1

我对vue-chartjs组件有问题，它是chartjs的包装器。

问题是数据不会自动使用新的输入值重新绘制图表。

[基本上，我搜索了整个互联网，然后尝试了所有内容（watchers，mixins，reactiveProp等），但没有任何效果。

最诚挚的问候。

这是我的代码。

Package.json

"@mdi/font": "^3.6.95",
"chart.js": "^2.9.3",
"core-js": "^3.3.2",
"eslint-loader": "^2.1.2",
"roboto-fontface": "*",
"vue": "^2.6.10",
"vue-chartjs": "^3.5.0",
"vue-resource": "^1.5.1",
"vue-router": "^3.1.3",
"vue-svg-gauge": "^1.2.1",
"vuelidate": "^0.7.4",
"vuetify": "^2.1.10",
"vuex": "^3.1.2"

Chart.vue

<template>
  <div class="app">
    <v-container fluid>
      <v-row>
        <v-col cols="12">
          <ChartLine v-if="loaded" :chartdata="chartdata" :options="options" />

          <v-card>
            <v-toolbar color="light-green" dark>
              <v-tabs v-model="tabs" background-color="transparent">
                <v-tab>A</v-tab>
                <v-tab>B</v-tab>
                <v-tab>C</v-tab>
                <v-tab>D</v-tab>
                <v-tab>E</v-tab>
              </v-tabs>
            </v-toolbar>

            <v-tabs-items v-model="tabs">
              <v-tab-item>
                <div class="small">
                  <ChartLine :chart-data="dataCollectionHour" :options="options"></ChartLine>
                </div>
              </v-tab-item>
              <v-tab-item>
                <div class="small">
                  <ChartBar :chart-data="dataCollectionDay" :options="options"></ChartBar>
                </div>
              </v-tab-item>
              <v-tab-item>
                <div class="small">
                  <ChartBar :chart-data="dataCollectionWeek" :options="options"></ChartBar>
                </div>
              </v-tab-item>
              <v-tab-item>
                <div class="small">
                  <ChartBar :chart-data="dataCollectionMounth" :options="options"></ChartBar>
                </div>
              </v-tab-item>
              <v-tab-item>
                <div class="small">
                  <ChartBar :chart-data="dataCollectionYear" :options="options"></ChartBar>
                </div>
              </v-tab-item>
            </v-tabs-items>
          </v-card>
        </v-col>
      </v-row>
    </v-container>
  </div>
</template>

<script>
import ChartLine from "./ChartLine.vue";
import ChartBar from "./ChartBar.vue";
import config from "../config.json";

export default {
  components: {
    ChartLine,
    ChartBar
  },
  data() {
    return {
      timer: null,

      tabs: null,

      options: {
        scales: {
          yAxes: [
            {
              ticks: {
                beginAtZero: true
              },
              gridLines: {
                display: true
              }
            }
          ],
          xAxes: [
            {
              gridLines: {
                display: true
              }
            }
          ]
        },
        legend: {
          display: true
        },
        responsive: true,
        maintainAspectRatio: false
      },

      dataCollectionHour: {
        labels: [],
        datasets: [
          {
            label: "Výstup",
            backgroundColor: "#EF9A9A",
            borderColor: "#D32F2F",
            borderWidth: 3,
            data: []
          },
          {
            label: "Síť",
            backgroundColor: "#B388FF",
            borderColor: "#4A148C",
            borderWidth: 3,
            data: []
          },
          {
            label: "Solární Energie",
            backgroundColor: "#FFF59D",
            borderColor: "#FBC02D",
            borderWidth: 3,
            data: []
          },
          {
            label: "Baterie",
            backgroundColor: "#DCEDC8",
            borderColor: "#689F38",
            borderWidth: 3,
            data: []
          }
        ]
      },
      dataCollectionDay: {
        labels: [],
        datasets: [
          {
            label: "Výstup",
            backgroundColor: "#EF9A9A",
            borderColor: "#D32F2F",
            borderWidth: 3,
            data: []
          },
          {
            label: "Síť",
            backgroundColor: "#B388FF",
            borderColor: "#4A148C",
            borderWidth: 3,
            data: []
          },
          {
            label: "Solární Energie",
            backgroundColor: "#FFF59D",
            borderColor: "#FBC02D",
            borderWidth: 3,
            data: []
          },
          {
            label: "Baterie",
            backgroundColor: "#DCEDC8",
            borderColor: "#689F38",
            borderWidth: 3,
            data: []
          }
        ]
      },
      dataCollectionWeek: {
        labels: [],
        datasets: [
          {
            label: "Výstup",
            backgroundColor: "#EF9A9A",
            borderColor: "#D32F2F",
            borderWidth: 3,
            data: []
          },
          {
            label: "Síť",
            backgroundColor: "#B388FF",
            borderColor: "#4A148C",
            borderWidth: 3,
            data: []
          },
          {
            label: "Solární Energie",
            backgroundColor: "#FFF59D",
            borderColor: "#FBC02D",
            borderWidth: 3,
            data: []
          },
          {
            label: "Baterie",
            backgroundColor: "#DCEDC8",
            borderColor: "#689F38",
            borderWidth: 3,
            data: []
          }
        ]
      },
      dataCollectionMounth: {
        labels: [],
        datasets: [
          {
            label: "Výstup",
            backgroundColor: "#EF9A9A",
            borderColor: "#D32F2F",
            borderWidth: 3,
            data: []
          },
          {
            label: "Síť",
            backgroundColor: "#B388FF",
            borderColor: "#4A148C",
            borderWidth: 3,
            data: []
          },
          {
            label: "Solární Energie",
            backgroundColor: "#FFF59D",
            borderColor: "#FBC02D",
            borderWidth: 3,
            data: []
          },
          {
            label: "Baterie",
            backgroundColor: "#DCEDC8",
            borderColor: "#689F38",
            borderWidth: 3,
            data: []
          }
        ]
      },
      dataCollectionYear: {
        labels: [],
        datasets: [
          {
            label: "Výstup",
            backgroundColor: "#EF9A9A",
            borderColor: "#D32F2F",
            borderWidth: 3,
            data: []
          },
          {
            label: "Síť",
            backgroundColor: "#B388FF",
            borderColor: "#4A148C",
            borderWidth: 3,
            data: []
          },
          {
            label: "Solární Energie",
            backgroundColor: "#FFF59D",
            borderColor: "#FBC02D",
            borderWidth: 3,
            data: []
          },
          {
            label: "Baterie",
            backgroundColor: "#DCEDC8",
            borderColor: "#689F38",
            borderWidth: 3,
            data: []
          }
        ]
      }
    };
  },
  created() {
    this.pollData();
  },
  methods: {
    pollData() {
      this.timer = setInterval(() => {
        if (this.tabs === 0) {
          this.$http.get(config.chartActualPower).then(Response => {
            this.dataCollectionHour.labels = Response.body.labels;
            this.dataCollectionHour.datasets[0].data = Response.body.load;
            this.dataCollectionHour.datasets[1].data = Response.body.grid;
            this.dataCollectionHour.datasets[2].data = Response.body.pv;
            this.dataCollectionHour.datasets[3].data = Response.body.bat;
          });
        } else if (this.tabs === 1) {
          this.$http.get(config.chartDay).then(Response => {
            this.dataCollectionDay.labels = Response.body.labels;
            this.dataCollectionDay.datasets[0].data = Response.body.load;
            this.dataCollectionDay.datasets[1].data = Response.body.grid;
            this.dataCollectionDay.datasets[2].data = Response.body.pv;
            this.dataCollectionDay.datasets[3].data = Response.body.bat;
          });
        } else if (this.tabs === 2) {
          this.$http.get(config.chartWeek).then(Response => {
            this.dataCollectionWeek.labels = Response.body.labels;
            this.dataCollectionWeek.datasets[0].data = Response.body.load;
            this.dataCollectionWeek.datasets[1].data = Response.body.grid;
            this.dataCollectionWeek.datasets[2].data = Response.body.pv;
            this.dataCollectionWeek.datasets[3].data = Response.body.bat;
          });
        } else if (this.tabs === 3) {
          this.$http.get(config.chartMounth).then(Response => {
            this.dataCollectionMounth.labels = Response.body.labels;
            this.dataCollectionMounth.datasets[0].data = Response.body.load;
            this.dataCollectionMounth.datasets[1].data = Response.body.grid;
            this.dataCollectionMounth.datasets[2].data = Response.body.pv;
            this.dataCollectionMounth.datasets[3].data = Response.body.bat;
          });
        } else if (this.tabs === 4) {
          this.$http.get(config.chartYear).then(Response => {
            this.dataCollectionYear.labels = Response.body.labels;
            this.dataCollectionYear.datasets[0].data = Response.body.load;
            this.dataCollectionYear.datasets[1].data = Response.body.grid;
            this.dataCollectionYear.datasets[2].data = Response.body.pv;
            this.dataCollectionYear.datasets[3].data = Response.body.bat;
          });
        }
      }, 1000);
    }
  },
  beforeDestroy: function() {
    clearInterval(this.timer);
  }
};
</script>

<style scoped>
.small {
  margin: 20px auto;
}
.v-card {
  height: 650px;
}
</style>

ChartLine.vue

<script>
import VueCharts from "vue-chartjs";

export default {
  extends: VueCharts.Line,
  mixins: [VueCharts.mixins.reactiveProp],
  props: ["options"],
  mounted() {
    this.renderChart(this.chartData, this.options);
  }
};
</script>

ChartBar.vue

<script>
import VueCharts from "vue-chartjs";

export default {
  extends: VueCharts.Bar,
  mixins: [VueCharts.mixins.reactiveProp],
  props: ["options"],
  mounted() {
    this.renderChart(this.chartData, this.options);
  }
};
</script>
javascript vue.js chart.js vuetify.js vue-chartjs
1个回答
0
投票

仅定义options道具，而不定义chartdata道具：

  props: ["options"],

但您同时使用它们

this.renderChart(this.chartData, this.options);

请参见Example

也请注意本指南“更新图表”部分中提到的所有注意事项。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.