重绘Highchart系列方法。 Vuejs

时间:2019-07-02 16:00:17

标签: javascript vue.js highcharts

在Vuejs和Hightcharts上构建反应式图表。堆积如山,试图为redraw()制造方法。

我尝试过this.chart.series[0].setData(this.values,true);,但是它不起作用,因为我需要设置整个series而不是series.data。我的系列数据格式为[{"data": 'value', "name": 'value'}],但我只知道如何重绘系列数据部分。任何提示将不胜感激!

// My data format:
    values: [ 
    { "data": [ 6000000, 0, 0, 0, 0, 0, 0, 0, 0, 0, { "isSum": true } ], "name": "Shares A" }, 
    { "data": [ 9600000, 0, 0, 0, 0, 0, 0, 0, 0, 0, { "isSum": true } ], "name": "Shares B" }, 
    { "data": [ 0, 0, 4000000, 0, 0, 0, 0, 0, 0, 0, { "isSum": true } ], "name": "Share C" }, 
    { "data": [ 0, 5000000, 0, 0, 0, 0, 0, 0, 0, 0, { "isSum": true } ], "name": "Shares D" } 
    ]
    // Redraw method:
    methods:{
        redraw(){
            // this doesn't work, need help with this part 
            this.chart.series[0].setData(this.values,true);

            // I've also tried this way, but it redraws only 1st seria, not every of them
            this.chart.series[0].update({
                data: this.values[0].data,
                name: this.values[0].name
            }, true); 
        }
    },
    watch:{
        values(){this.redraw()},
    },
    series: this.values

1 个答案:

答案 0 :(得分:1)

我终于找到了解决方法:

methods:{
        redraw(){
            chart = this.chart

            if(chart.series.length > 1){
                var s = 0;
                for(var i in this.values){
                    chart.series[s].setData(this.values[i].data);
                    chart.series[s].name = this.values[i].name;
                    s++;
                }
            }else{
                this.chart.series[0].setData(this.values[0].data);
                this.chart.series[0].name = this.values[0].name;
            }
        }
    },