如何在 Vue 中渲染图表数据集？

Question

我目前正在制作一个报告页面，目前正在努力如何将数据集呈现到我的条形图。我在向图表显示静态数据时没有问题，但是当我使用 axios 时它不起作用。我阅读了有关使用观察者和安装的解决方案。但是如果我的 BarChart 在另一个组件中，我不知道如何应用它。

这是我的条形图代码：

import { Bar } from "vue-chartjs";
export default {
  name: "BarChart",
  extends: Bar,
  data() {
    return {};
  },
  props: {
    label: {
      type: Array,
    },
    chartData: {
      type: Array,
    },
    options: {
      type: Object,
    },
  },
  mounted() {
    const dates = this.chartData.map((d) => d.date);
    const totalCheckIn = this.chartData.map((d) => d.totalCheckIn);
    const totalCheckOut = this.chartData.map((d) => d.totalCheckout);
    this.renderChart(
      {
        labels: dates,
        datasets: [
          {
            label: this.label[0],
            data: totalCheckIn,
          },
          {
            label: this.label[1],
            data: totalCheckOut,
          },
        ],
      },
      this.options
    );
  },
};

在我的报告组件中，我是这样使用它的：

<BarChart
   v-bind:chartData="checkIn"
   v-bind:options="checkInOptions"
   v-bind:label="checkInLabel"
></BarChart>

import BarChart from "../components/BarChart";

export default {
  name: "Reports",
  components: { BarChart },
  data() {
    return {
      checkInOptions: {
        responsive: true,
        maintainAspectRatio: false,
      },
      checkIn: [
        { date: "1", totalCheckIn: "2", totalCheckout: "2" },
        { date: "2", totalCheckIn: "1", totalCheckout: "2" },
      ],
      checkInLabel: ["Check In", "CheckOut"],
     }
   },
   beforeMount() {
    axios
      .get('http://localhost:3000/monthly-checkin/'+this.month+'/'+this.year+'')
      .then((res) => {
        this.checkIn = res.data.monthly;
        console.log(this.checkIn)
      })
      .catch((err) => {
        console.log(err.response.data.message);
      });
   } 
}

请帮忙

Answer 1

在您的 BarChart 组件中使用 watch，如下所示：

watch:{
    chartData:function(newVal,OldVal){
        //assign chart data
    },
  },

之后您需要执行可以更新条形图数据的方法。下面是完整的片段。

import { Bar } from "vue-chartjs";
export default {
    name: "BarChart",
    extends: Bar,
    data() {
        return {};
    },
    props: {
        label: {
            type: Array,
        },
        chartData: {
            type: Array,
        },
        options: {
            type: Object,
        },
    },
    watch: {
        chartData: function (newVal, OldVal) {
            this.updateChart()
        },
    },
    mounted() {
        this.updateChart()
    },
    methods: {
        updateChart() {
            const dates = this.chartData.map((d) => d.date);
            const totalCheckIn = this.chartData.map((d) => d.totalCheckIn);
            const totalCheckOut = this.chartData.map((d) => d.totalCheckout);
            this.renderChart(
                {
                    labels: dates,
                    datasets: [
                        {
                            label: this.label[0],
                            data: totalCheckIn,
                        },
                        {
                            label: this.label[1],
                            data: totalCheckOut,
                        },
                    ],
                },
                this.options
            );
        }
    }
};

如何在 Vue 中渲染图表数据集？

How to Render Chart Datasets in Vue?

javascript

vue.js

chart.js

vue-chartjs