Question

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

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

<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>

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

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;
    },

Answer 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

chart.js和vue的问题

1 个答案: