highcharts 在Vue JS中，从已挂载的()分配数据

yzxexxkh 于 2022-11-10 发布在 Highcharts

关注(0)|答案(1)|浏览(151)

我尝试在data（）中创建Highchart和from mounted（），尝试为highchart分配系列。但是我无法从mounted（）分配系列**。如果有人能帮助我解决这个问题，那将非常有帮助。我想从vue jsmounted（）将数据放入Highchart的系列中。

data () {
    return {

        colors: ['#3B97B2', '#67BC42', '#FF56DE', '#E6D605', '#BC36FE', '#000'],

        chartOptions: {
        chart: {
            type: 'column',
            scrollablePlotArea: {
                minWidth: 700,
                scrollPositionX: 1
            }
        },

        title: {
            text: 'Balance Sheet'
        },

        xAxis: {
            categories: [
                '2019年1月', '2019年2月', '2019年3月', '2019年4月', '2019年5月', '2019年6月', 
                '2019年7月', '2019年8月', '2019年9月', '2019年10月', '2019年11月', '2019年12月',
                '2020年1月', '2020年2月', '2020年3月', '2020年4月', '2020年5月', '2020年6月', 
                '2020年7月', '2020年8月', '2020年9月', '2020年10月', '2020年11月', '2020年12月',
                '2021年1月', '2021年2月', '2021年3月', '2021年4月', '2021年5月', '2021年6月', 
                '2021年7月', '2021年8月', '2021年9月', '2021年10月', '2021年11月', '2021年12月'
            ],
            labels: {
                overflow: 'justify'
            }
        },

        yAxis: {
            tickWidth: 1,
            title: {
                text: 'Wind speed (m/s)'
            },
            lineWidth: 1,
            opposite: true
        },

        tooltip: {
            pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.percentage:.0f}%</b><br/>',
            shared: true,
            split: true // Tooltip comment
        },

        plotOptions: {
            column: {
                stacking: 'percent'
            }
        },

            series: []
        }
    }
},

methods: {
    setSeries() {
        this.$setData(function() {
            this.chartOptions.series[1] = this.bsData[100000000];
        });
    }
}

mounted () {
    this.setSeries();
}

我只是一个Vue.js的初学者，因此不擅长解释事情。

highcharts

来源：https://stackoverflow.com/questions/59942578/in-vue-js-assign-data-from-mounted

1条答案

按热度按时间

ohfgkhjo1#

很简单，你需要在挂载中使用箭头函数，使用普通的function时，this指针的作用域丢失。

methods: {
    setSeries() {
        // Note the use of arrow function
        this.$setData(() => {
            this.chartOptions.series[1] = this.bsData[100000000];
        });
    }
}

或者，如果您不想使用箭头函数，请使用闭包维护对this指针的引用：

methods: {
    setSeries() {
        // Maintain the closure
        const vm = this;

        this.$setData(function () {
            vm.chartOptions.series[1] = vm.bsData[100000000];
        });
    }
}

此外，您的代码还有两个问题。方法$setData在Vue.js中不存在。您需要使用此处所述的$set方法。因此，您的代码应为：

methods: {
    setSeries() {

        this.$set(() => {
            this.chartOptions.series[1] = this.bsData[100000000];
        });
    }
}

接下来，你不需要直接使用$set方法。它是在极端情况下使用的。Vue.js使用getters和setters自动检测更改。在这里阅读更多关于数组更改检测的信息。对于数组，你必须使用 Package 的方法或每次都创建新的数组。
因此，您的最终解决方案可能类似于：

methods: {
    setSeries() {
        // Updating array data structure by creating new array instead of updating array by index.
        this.chartOptions.series = [this.chartOptions.series[0], this.bsData[100000000]];
    }
}

总之，您需要做三件事：
1.使用箭头功能保持this参考。
1.不要使用$set更改Vue示例数据。
1.不要直接使用索引来改变数组。使用concat之类的方法，push、pop等 Package 方法或反结构化方法来创建新数组。

赞(0）回复(0）举报 2022-11-10

我来回答

highcharts 在Vue JS中，从已挂载的()分配数据

1条答案

相关问题

热门标签

最新问答