如何在 Vuejs 上更新图表师

Question

首先祝大家新年快乐。

我想打电话给 update chartist-js。

main.js

import Chartist from "chartist";

Vue.prototype.$Chartist = Chartist;

Component.vue

<chart-card
                    :chart-data="performanceUser.data"
                    :chart-options="performanceUser.options"
                    chart-type="Line"
                    data-background-color="green">
            </chart-card>

Component.vue -> methods

getStatsUser(){
      UsersAPI.getUserPerformance(this.users.filters.user.active).then(r => {
        this.performanceUser.data.labels = r.data.labels;
        this.performanceUser.data.series = r.data.series;

        this.$Chartist.update();

      });
    }

Answer 1

您需要做几件事。首先，您不需要使用 Chartist 实例修补 Vue 原型对象。只需在需要的地方导入 Chartist 包。当您需要单例或有状态构造时，需要原型修补。

其次，我假设您所有的图表呈现逻辑都将在您的 chart-card 组件中。它大致看起来像：

<template>
    <!-- Use vue.js ref to get DOM Node reference -->
    <div class="chart-container" ref="chartNode"></div>
</template>
<script>
import Chartist from 'chartist';

export default {

    // data is an object containing Chart X and Y axes data
    // Options is your Chartist chart customization options
    props: ['data', 'options'],

    // Use of mounted is important.
    // Otherwise $refs will not work
    mounted() {

        if (this.data && this.options) {
            // Reference to DOM Node where you will render chart using Chartist
            const divNode = this.$refs.chartNode;

            // Example of drawing Line chart
            this.chartInstance = new Chartist.Line(divNode, this.data, this.options);
        }

    },

    // IMPORTANT: Vue.js is Reactive framework.
    // Hence watch for prop changes here
    watch: {
        data(newData, oldDate) {
            this.chartInstance.update(newData, this.options);
        },

        options(newOpts) {
            this.chartInstance.update(this.data, newOpts);
        }
    }
}
</script>

最后，在您的调用组件中，您将拥有：

getStatsUser() {
    UsersAPI.getUserPerformance(this.users.filters.user.active).then(r => {
        // Since component is watching props,
        // changes to `this.performanceUser.data`
        // should automatically update component
        this.performanceUser.data = {
            labels: r.data.labels,
            series: r.data.series
        };
    });
}

我希望这能让您了解如何为 Chartist 图表构建 Vue 包装器。

如何在 Vuejs 上更新图表师

How to make chartist update on Vuejs

vue.js

chartist.js