Question

这个问题似乎已经存在，但我也尝试过这些问题，但有些问题现在不活跃。我的目标是在重新加载页面时使图表具有响应性。我尝试从Vue页面本身尝试解决方案，即添加观察器和mixins，但是它不起作用，正如其他像我一样坚持的人所评论。只有在更改图表的宽度和高度时，我的渲染才会出现，但是每次刷新时，它都会消失。

Dashboard.vue

<template>
   <div align="center">
              <LineChart :chartData="chartData" :options="options" style="width:auto;height:auto;" />
            </div>
</template>
<script>
export default {
  data() {
    return {
      chartData: {
        labels: [],
        datasets: [
          {
            data: [],
            backgroundColor: "#3498db",
            borderColor: "rgba(136,136,136,0.5)",
            label: "",
          },
        ],
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        title: {
          display: true,
          text: "Student's Score Chart",
        },
        tooltips: {
          mode: "index",
          intersect: false,
        },
        hover: {
          mode: "nearest",
          intersect: true,
        },
        scales: {
          xAxes: [
            {
              display: true,
              scaleLabel: {
                display: true,
                labelString: "Student Names",
              },
            },
          ],
          yAxes: [
            {
              display: true,
              scaleLabel: {
                display: true,
                labelString: "Score Points",
              },
            },
          ],
        },
      },
   mounted() {
    this.getListData();
  },
   methods: {
      getListData() {
      axios
        .get("http://localhost/MyComposer/", {
          params: {
            answerId: 6,
            token: this.token,
          },
        })
        .then((response) => {
          console.log(response.data);
          for (var k = 0; k < response.data.length; k++) {
            const fullName =
              response.data[k].FirstName +
              " " +
              response.data[k].MiddleName +
              " " +
              response.data[k].LastName;

            this.chartData.labels.push(
              fullName + " (" + response.data[k].TestName + ") "
            );
            this.chartData.datasets[0].data.push(response.data[k].Score);
            console.log(this.chartData);
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
}
}

ChartContainer.js

import { Line, mixins } from 'vue-chartjs'

export default {
  extends: Line,
  mixins: [mixins.reactiveProp],
  props: ['chartData', 'options'],
  mounted () {
    this.renderChart(this.chartData, this.options)
  },
  watch: {
    chartData () {
      this.renderChart(this.chartData, this.options)
    }
  }
}

Answer 1

我解决了这个问题。一直在文档中。对于不认识的人，您只需添加v-if即可仅使加载的方法在页面加载后激活。

   <line-chart
                v-if="loaded"
                :chart-data="this.chartData"
                :options="this.options"
                style="width:auto;height:auto;"
              ></line-chart>

data: {
loaded: false 
}

getListData(){
   this.loaded = true;
 //My Axios API Request
}

重新加载页面时Vue ChartJS无法呈现

1 个答案: