Динамический рендеринг графика с помощью chartjs

Question

Так что я довольно новичок в Vue.js и хотел бы отобразить динамически отображаемый график на странице.Пока у меня есть

/*/barChart.js
import { Bar, mixins } from 'vue-chartjs'
const { reactiveProp } = mixins

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

И в моем основном файле Vue

/*/stats.js
const stats = new Vue({
    el: '#app',
    components:{
        "bar-chart": barChart,
    },
    data: function () {
        return {
            chartData: {},
            charOptions: {},
        }
    },
    watch:{
        campaignIds: function(){
            this.fillInStats();
        }
    },
    methods: {
        fillInStats: function(){

        //here I'd like to push data in the chart or remove them depending on a list of Id's.
        }
    },
    //etc
}

Так что, когда я обновляю данные «вручную» (путем непосредственной установки this.chartData), происходит обновление, ноЯ не могу заставить его работать гладко. документация говорит, что нужно использовать такую ​​функцию, как

function addData(chart, label, data) {
    chart.data.labels.push(label);
    chart.data.datasets.forEach((dataset) => {
        dataset.data.push(data);
    });
    chart.update();
}

, и у меня нет проблем с тем, чтобы заставить работать this.chartData.labels.push(label), но я не уверен, как правильно вызвать chart.update() в моемслучай (я все еще не знаком со структурой представления).

Это HTML:

<div class="card-body">
    <bar-chart :chart-data="chartData" :options="chartOptions" :height="100"></bar-chart>
</div>

Редактировать

Я сделал этодобавьте

data: function () {
    return {

        chartData:{labels: ['Destinataires', 'Non-envoyés', 'Non-lus', 'Lus'], datasets: [{label: '', backgroundColor: 'white', data: [0, 0, 0, 0]}]},
        chartOptions: {scales: {yAxes: [{ticks: {beginAtZero:true}}]}},
        dataSets: [],
        //etc
    }
},

и обновите данные следующим образом:

addInStats: function(id){

    let color = this.pickColor();

    let dataSet = {
        label: this.campaignsList[id].name,
        backgroundColor: color,
        data: [this.subscriberCountArray[id], this.nonSentCountArray[id], this.nonReadCountArray[id], this.readCountArray[id]]
    };

    this.dataSets.push(dataSet);

    this.chartData = {
        labels: ['Destinataires', 'Non-envoyés', 'Non-lus', 'Lus'],
        datasets: this.dataSets,
    };
},

, но теперь, когда я добавил данные несколько раз, весь график становится пустым

Answer 1

Так что это было мое решение:

import barChart from 'path/to/barChart'

const stats = new Vue({
    //
components:{
    "bar-chart": barChart,
},
data: function () {
    return {
        barChartOptions: {responsive: true, scales: {yAxes: [{ticks: {beginAtZero:true}}]}},
        barChartData: [],
        subscriberCountArray: null,
        readCountArray: null,
        colorArray: [],
    //
    }
},
methods: {
    initStats: function() {
        axios.post(
            //get the data and 

        ).then(response => {
            if(response.data.success) {

                this.campaignsList = response.data.campaignsList;

                this.subscriberCountArray = response.data.subscriberCountArray;
                this.readCountArray = response.data.readCountArray;

                let barDataSets = [];

                for(let i = 0; i < this.campaignIds.length; i++){

                    let currentId = parseInt(this.campaignIds[i]);

                    let color = '';
                    let rgba = [];

                    if(this.colorArray[currentId]){
                        color = this.colorArray[currentId];
                    }else{
                        //pickcolor
                    }

                    barDataSets.push({
                        label: this.campaignsList[currentId].name,
                        backgroundColor: color,
                        data: [this.subscriberCountArray[this.campaignsList[currentId].id], this.readCountArray[this.campaignsList[currentId].id]]
                    });

                this.barChartData = {labels: ['Destinataires', 'Lus'], datasets: barDataSets};

    },
    checkCampaign: function(id){
        if(this.campaignIds.length === 0 || !this.campaignIds.includes(id)){
            this.campaignIds.push(id);
        }else{
            this.campaignIds.splice(this.campaignIds.indexOf(id), 1);
        }
        this.initStats();
    },
    pickColor: function(interval = null, type = null, base = null){
        //
    },
},
mounted(){
    this.initStats();
}

С в шаблоне:

<bar-chart :chart-data="barChartData" :options="barChartOptions"></bar-chart>

и в barChart.js:

import { Bar, mixins } from 'vue-chartjs'
const { reactiveProp } = mixins

export default {
    extends: Bar,
    mixins: [reactiveProp],
    props: ['options'],
    mounted () {
        this.renderBarChart();
    },
    methods: {
        renderBarChart: function(){
            this.renderChart(this.chartData, this.options);
        }
    },
    watch: {
        chartData: function () {
            this.renderBarChart();
        }
    }
}

НеМне кажется, это очень эффективный способ, но это единственный способ, которым я мог бы сделать рендеринг динамической статистики с помощью vue work.

Answer 2

Не очень ясно, что вы хотите сделать и почему ваш вариант использования не работает, так как reactiveProp mixin должен позаботиться об обновлении , как описано в документации .

Однако вам, возможно, следует реализовать свой собственный наблюдатель, в котором вы можете запустить код обновления.Вот так:

watch: {
  chartData() {
    this.$data._chart.update();
  }
}

По сути, вы можете получить доступ ко всем методам от chart до this.$data._chart.

Или можете просто добавить вызов this.$data._chart.update(), где еще большеподходит для вашего рабочего процесса.

_{Кроме того, просто имейте в виду, что есть орфографическая ошибка: charOptions вместо chartOptions}