vue.js組件中的Chart.js圖表​​未更新

Question

我正在使用vue.js和chart.js開發一些加密貨幣投資組合的可視化模塊，但目前仍處於這種狀態：

顯示空圖表，但未呈現任何值。

由於初始化圖表后會動態加載值，因此我相信圖表無法正確更新自身（即使我調用.update（）），但是也不會顯示任何錯誤。

我將chart.js渲染包裝在一個vue組件中：

Vue.component('portfolioValues', {
    template: '<canvas width="400" height="200"></canvas>',
    data: function() {
        return {
            portfolio_value: [],
            portfolio_labels: [],
            chart: null,
        }
    },
    methods: {
        load_portfolio_value_local: function() {
            values = [];
            labels = []
            local_data.forEach(element => {
                values.push(element.total_usd);
                labels.push(moment(element.timestamp, 'X'));
            });
            this.portfolio_value = values;
            this.portfolio_labels = labels;
            this.chart.update();
        },

        render_chart: function() {
            this.chart = new Chart(this.$el, {
                type: 'line',
                data: {
                    labels: this.portfolio_labels,
                    datasets: [{
                        label: "Portfolio Value",
                        data: this.portfolio_value,
                    }]
                },
                options: {
                    scales: {
                        xAxes: [{
                            type: 'time',
                            distribution: 'linear',
                        }]
                    }
                }
            });
        }
    },
    mounted: function() {
        this.render_chart();
        this.load_portfolio_value_local();
    }
});

出於演示目的，我僅在本地添加了一些數據，如下所示：

local_data = [{
        "timestamp": 1515102737,
        "total_btc": 0.102627448096786,
        "total_usd": 1539.41274772627
    }, {
        "timestamp": 1515102871,
        "total_btc": 0.102636926127186,
        "total_usd": 1538.52649627725
    }, {
        "timestamp": 1515103588,
        "total_btc": 0.102627448096786,
        "total_usd": 1532.33042753311
    }
]

這是完整的演示代碼： https : //codepen.io/perelin/pen/mppbxV

為什么沒有數據呈現任何想法？ 謝謝！

Answer 1

您在這里遇到的問題是vuejs如何處理其data 。

如果您這樣使用它：

local_data.forEach(element => {
    this.portfolio_value.push(element.total_usd);
    this.portfolio_labels.push(moment(element.timestamp, 'X'));
});

this.chart.update();

圖表將更新。 但是，通過重新初始化數組，您可以對付vuejs。

TL; DR

如果要重新初始化對象，可以將數組分配給該對象：

Object.assign(this.portfolio_value, values);
Object.assign(this.portfolio_labels, labels);

這樣，鏈接就可以正常工作。