vue.js - How to make custom vue-chart.js plugins reactive - Stack Overflow

admin管理员组

文章数量:1305420

Im working with vue chart.js and wanted to create a gauge chart. I was able to create it successfully, but im having a hard time to make the data im using in my custom plugins to be reactive (For instance, I want a prop to determine what the label says). Only problem is that I havent found a way to be able to access said props and along with that, havent found a way to make the plugin reactive to changes (Such as data changes, window size changes, etc.). How can I get my plugin to be reactive to changes?

Plugin

    const gaugeFlowMeter = {
        id: 'gaugeFlowMeter',
        afterDatasetsDraw(chart: any) {
        const { ctx, data } = chart;
    
        ctx.save();
        const needleValue = data.datasets[0].needleValue;
        const xCenter = chart.getDatasetMeta(0).data[0].x;
        const yCenter = chart.getDatasetMeta(0).data[0].y;
    
        // flowMeter
        ctx.font = 'bold 20px sans-serif';
        ctx.fillStyle = 'grey';
        ctx.textAlign = 'center';
        // Props.prefix/suffix is what im struggling to have change. Always comes out as undefined
        ctx.fillText(`${props.prefix ?? ''}${needleValue}${props.suffix ?? ''}`, xCenter, yCenter + 40);
        }
    };

Usage of Plugin

<Doughnut :id="props.id" ref="gaugeChart" :data="{ datasets: datasets, labels: labels }" :options="chartOptions"
            :plugins="[gaugeNeedle, gaugeFlowMeter, gaugeLabels]" />

本文标签： vuejsHow to make custom vuechartjs plugins reactiveStack Overflow