Apexchart не обновляется динамически с помощью axios - PullRequest
Новая
       53

Apexchart не обновляется динамически с помощью axios

0 голосов
/ 28 апреля 2020

Функция updateSeries не работает. Я не могу понять, почему это не так. Функция uChart () действительно вызывается. У меня есть следующий код: 

<template>
<div>
    <Menu></Menu>
    <h1> Our Home Website! </h1>

    <apexchart ref="chart1" width="500" type="line" :options="options" :series="series"></apexchart>
</div>

импортировать меню из './Menu' импортировать топор ios из 'топор ios' 

export default {
    name: 'Home',
    components: {
        'Menu': Menu
    },
    data: function () {
        return {
            options: {
                chart: {
                    height: 350,
                    type: 'bar',
                    id: 'chart'
                },
                dataLabels: {
                    enabled: false
                },
                series: [],
                title: {
                    text: 'Ajax Example',
                },
                noData: {
                    text: 'Loading...'
                }
            }
        }
    },
    mounted: function () {
        this.uChart()
    },
    methods: {
        uChart: function() {
            axios
                .get('http://my-json-server.typicode.com/apexcharts/apexcharts.js/yearly')
                .then(function (response) {
                    this.$refs.chart1.updateSeries([{
                        name: 'Sales',
                        data: response.data
                    }])
                });
            console.log(this.$refs.chart1);
        }
    }

Ссылка на диаграмму работает так же, как ссылка на данные JSON. Но график остается в состоянии «загрузки». Вот как на самом деле это выглядит на веб-сайте и ошибки, которые я получаю

1 Ответ

0 голосов
/ 30 апреля 2020

Как отметил Эстус Flask в своем комментарии. Ответ на этот вопрос заключается в использовании синтаксиса стрелки для аргумента then, поскольку это обратный вызов. Следовательно, правильная функция выглядит следующим образом: 

    methods: {
    uChart: function() {
        axios
            .get('http://my-json-server.typicode.com/apexcharts/apexcharts.js/yearly')
            .then(response => {
                this.$refs.chart1.updateSeries([{
                    name: 'Sales',
                    data: response.data
                }])
            });
        console.log(this.$refs.chart1);
    }
}

Для получения более подробной информации об этой теме c проверьте ответ на этот вопрос: Как получить доступ к правильному this внутри обратного вызова?

...