chart.js 和 vue 的问题答案

【问题标题】：Issue with chart.js and vuechart.js 和 vue 的问题
【发布时间】：2023-03-31 00:36:01
【问题描述】：

我正在尝试将 chart.js 与 vue 一起使用，到目前为止结果还不错，但是当我通过 axios 获取图表数据时（安装图表组件时数据不存在），我的图表不显示任何内容，我'正在尝试提出一种方法来在我的组件中的数据实际存在时重新呈现图表，而不是等待 ajax 调用完成但我还没有找到解决方案......

我通过 props 将图表的所有相关数据传递给图表组件，如下所示：

<template>
<section class="CHARTmaincontainer">
    <canvas :id="id" :width="width" :height="height"></canvas>
</section>
</template>
<!--SCRIPTS-->
<script>
import Chart from 'chart.js';
export default {
name: 'ChartJS',


props:
{
    id:{ required:true, type:String },
    type:{ default:'bar', type:String },
    width:{ default:400, type:Number},
    height:{ default:175, type:Number },
    data:{ required:true, type:Array },
    label:{ default:'Gráfico', type:String },
    labels:{ required: true, type:Array } 
},


mounted()
{
    let ctx = document.getElementById(this.id);
    let chart = new Chart(ctx, {
    type: this.type,
    data: {
        labels: this.labels,
        datasets: [{
            label: this.label,
            data: this.data,
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                },
                gridLines: {
                    display: true
                }
            }],
            xAxes: [{
                ticks: {
                    beginAtZero: true
                },
                gridLines: {
                    display: true
                }
            }]
        },
    },
    legend: {
        display: false
    },
    tooltips: {
        enabled: true,
        mode: 'single',
        callbacks: {
            label: function(tooltipItems, data) {
                return '$' + tooltipItems.yLabel;
            }
        }
    },
    responsive: true,
    maintainAspectRatio: false,
    });
},


};
</script>
<!--STYLES-->
<style scoped>
.CHARTmaincontainer{width:100%; display:flex; flex-direction:column; height:auto; margin:20px 0px;}
</style>

这是我放置图表组件和传递数据的组件：

<template>
<section class="entry_maincontainer">
    <chart-js v-if="ordersCount"
        :id="'grafico1'"
        :data="ordersCount"
        :label="'Descuentos vendidos'"
        :labels="['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Ago', 'Oct', 'Nov', 'Dic']">
    </chart-js>
</section>
</template>
<!--SCRIPTS-->
<script>
import { mapState, mapGetters, mapActions, mapMutations } from 'vuex';
export default {
name: 'StatsPanel',


computed:
{
    ...mapState('Orders', ['orders']),
    ...mapGetters('Orders', ['ordersCount', 'ordersTotal']),
    ...mapState('Globals', ['globals']),
    ...mapState('Loader', ['loader']),
},


mounted()
{
    console.log(this.$options.name+' component successfully mounted');
    this.getAll();
},


methods:
{
    ...mapActions('Orders', ['getAll']),
    ...mapMutations('Loader', ['RESET_LOADER']),
}


};
</script>
<!--STYLES-->
<style scoped>
</style>

我的 getter，这是用于渲染我的图表的主要数据道具：

ordersCount: state => {

        let monthlyCount = { Enero:0, Febrero:0, Marzo:0, Abril:0, Mayo:0, Junio:0, Julio:0, Agosto:0, Septiembre:0, Octubre:0, Noviembre:0, Diciembre:0 };

        _.forEach(state.orders,  function(order) { 
            let capitalizedMonth = _.upperFirst(Vue.moment(order.created_at).format('MMMM'));
            monthlyCount[capitalizedMonth] = parseInt( monthlyCount[capitalizedMonth] ) + parseInt( order.discountcodes.length );
        });

        let values = Object.values(monthlyCount);

        return values;
    },

【问题讨论】：

标签： javascript vue.js

【解决方案1】：

为了更新图表，Chart.js 提供了update 方法，用于在您更改图表实例的数据后调用。请参阅Updating Charts。

所以你可以像你一样在mounted钩子中创建图表实例，并设置观察者来观察你的道具然后更新图表实例：

this.chart = new Chart(this.$refs.canvas, {
  type,
  data,
  options
});

this.$watch(
  vm => (vm.data, vm.options),
  () => {
    this.chart.data = this.data;
    this.chart.options = this.data;
    this.chart.update();
  }
);

Live Example

【讨论】：