График Highcharts не перерисовывался после изменения данных vue - PullRequest
Новая
       3

График Highcharts не перерисовывался после изменения данных vue

0 голосов
/ 11 января 2020

Я беру пример с: https://www.highcharts.com/demo/column-stacked

Также ссылаюсь на код из: Как использовать Vue связанные данные в Highcharts?

Я строю образец следующим образом: 

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/7.1.1/highcharts.js"></script>
    </head>
    <body>      
        <div id="app">
           <div id="container">
        </div>
        </div>
    </body>
</html>
<script>
    new Vue({
        el: "#app",
        data: {
            chart: undefined,
            config: {
                chart: {
                    type: 'column'
                },
                title: {
                    text: 'Stacked column chart'
                },
                xAxis: {
                    categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
                },
                yAxis: {
                    min: 0,
                    title: {
                        text: 'Total fruit consumption'
                    },
                    stackLabels: {
                        enabled: true,
                        style: {
                            fontWeight: 'bold',
                            color: ( // theme
                                Highcharts.defaultOptions.title.style &&
                                Highcharts.defaultOptions.title.style.color
                            ) || 'gray'
                        }
                    }
                },
                legend: {
                    align: 'right',
                    x: -30,
                    verticalAlign: 'top',
                    y: 25,
                    floating: true,
                    backgroundColor:
                        Highcharts.defaultOptions.legend.backgroundColor || 'white',
                    borderColor: '#CCC',
                    borderWidth: 1,
                    shadow: false
                },
                tooltip: {
                    headerFormat: '<b>{point.x}</b><br/>',
                    pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
                },
                plotOptions: {
                    column: {
                        stacking: 'normal',
                        dataLabels: {
                            enabled: true
                        }
                    }
                },
                series: [{
                    name: 'John',
                    data: [3, 3, 4, 8, 2]
                }, {
                    name: 'Jane',
                    data: [3, 2, 3, 2, 1]
                }, {
                    name: 'Joe',
                    data: [3, 4, 4, 3, 5]
                }]
            },
        },
        mounted() {
            this.render();
            // simulation of some data changing after some time
            setTimeout(() => {
                this.config.series = [{
                    name: 'John',
                    data: [53, 23, 24, 27, 32]
                }, {
                    name: 'Jane',
                    data: [23, 22, 23, 32, 31]
                }, {
                    name: 'Joe',
                    data: [33, 24, 24, 32, 35]
                }]
                console.log('updated')


            }, 3000)
        },
        watch: {
            config() {
                this.render();
            },
        },
        methods: {
            render() {              
                this.chart = Highcharts.chart('container', this.config)
            }
        }
    })

</script>

Но я не знаю, почему диаграмма не будет перерисована после обновления config.series (с более высоким значением каждой категории).

Ответы [ 2 ]

0 голосов
/ 11 января 2020

Вот решение для вас:

  1. Уничтожить объект конфигурации в методе рендеринга, чтобы потерять ссылку: 

    render() {              
    this.chart = Highcharts.chart('container', {...this.config});
}

  2. Изменить ваш наблюдатель конфигурации на глубокий (таким образом наблюдатель будет реагировать, когда вы изменяете свойство, принадлежащее объекту, например, this.config.series = [...]): 

    config: {
    deep: true,
    handler() {
        this.render();
    }
}
0 голосов
/ 11 января 2020

Проблема в том, что ваш config наблюдатель наблюдает только за изменением config, а не за его вложенными свойствами, поэтому this.config.series = [...] не вызовет ваш наблюдатель.

Первое решение, используйте параметр deep: 

watch: {
  config: {
    handler() {
      this.render()
    },
    deep: true
  }
}

Демо

Второе решение, используйте синтаксис разброса для назначения всего объекта: 

this.config = {
  ...this.config,
  series: [{ /* */ }]
}

Демо

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...