时间戳

首页 > 解决方案 > 如何在 Vuejs 上进行图表专家更新

vue.js - 如何在 Vuejs 上进行图表专家更新

问题描述

首先祝大家新年快乐。

我想打电话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();

      });
    }

标签： vue.jschartist.js

解决方案

您需要做几件事。首先，您不需要使用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 包装器。

推荐阅读