Как сделать обновление чартиста на Vuejs - PullRequest
Новая
       27

Как сделать обновление чартиста на Vuejs

0 голосов
/ 31 декабря 2018

Прежде всего, счастливого нового года для всех.

Я хотел бы позвонить 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();

      });
    }

1 Ответ

0 голосов
/ 01 января 2019

Есть пара вещей, которые вам нужно сделать.Во-первых, вам не нужно исправлять объект-прототип Vue с помощью экземпляра Chartist .Просто импортируйте 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
        };
    });
}

Надеюсь, это даст вам представление о том, как создать оболочку Vue для Chartist.графики.

...