Question

对于某些数据可视化，我使用ractive和chart.js。初始绘图效果很好，但是当我的数据发生变化时，我找不到自动更新图表的方法。到目前为止，我得到了（简化）：

const Stats = '<canvas id="myChart" width="400" height="400"></canvas>'
    new Ractive ({
        el: '#stats',
        template: Stats,
        magic: true,
        modifyArrays: true,
        data: {docs}, // <= some JSON Data
        computed: {
            Data1() {
                let tempList = this.get('docs');
                // rearrange & filter Data 
                return tempList ;
            },
            Data2() {
                let tempList2 = this.get('docs');
                // rearrange & filter Data 
                return tempList2 ;
            },
            Data3() {
                let tempList3 = this.get('docs');
                // rearrange & filter Data 
                return tempList3 ;
            },
            }

        },
        onrender: function () {
            let DataSet1 = this.get('Data1');
            let DataSet2 = this.get('Data2');
            let DataSet3 = this.get('Data3');
            let ctx = document.getElementById("myChart");
            var myChart = new Chart(ctx, {
                type: 'doughnut',
                data: {
                    labels: ["Data 1", "Data 1", "Data 3"],
                    datasets: [{
                        label: 'All my Data',
                        data: [DataSet1.length, DataSet2.length, DataSet3.length],
                        backgroundColor: [
                            'rgba(255, 99, 132, 0.2)',
                            'rgba(255, 159, 64, 0.2)',
                            'rgba(75, 192, 192, 0.2)'
                        ],
                        borderColor: [
                            'rgba(255,99,132,1)',
                            'rgba(255, 159, 64, 1)',
                            'rgba(75, 192, 192, 1)'
                        ],
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: false
                }
            });

        },
        onchange: function () {
            let newData = this.get('docs')
            addData(myChart, label, newData)
            function addData(chart, label, data) {
                chart.data.labels.push(label);
                chart.data.datasets.forEach((dataset) => {
                    dataset.data.push(data);
                });
                chart.update();
            }
        }
    });

当然我在行chart.data.labels.push(label);中收到错误，而且我非常确定我需要onrender函数中的计算值，而不是初始数据集。但我真的不知道如何将这些功能纳入更新功能，或者这个功能是否正确...

Answer 1

如果您正在使用第三方插件，我建议您使用Ractive decorators。 This post on ractivejs-and-jquery-plugins向您展示了如何基于文件上载控件实现装饰器的起点。

在你的情况下，我建议用数据作为参数构建一个装饰器，不要忘记实现UPDATE函数（在你的情况下，你将使用图表的新数据调用更新方法）

Answer 2

由于我无法弄清楚如何为Chart.js编写自己的装饰器，我想我发布了适用于我的解决方案。我不认为这是最好的做法，并且肯定装饰者会更好（因此我不会将此解决方案标记为正确答案），但它有效：

const Stats = '<canvas id="myChart" width="400" height="400"></canvas>'
new Ractive ({
    el: '#stats',
    template: Stats,
    magic: true,
    modifyArrays: true,
    data: {docs}, // <= some JSON Data
    computed: {
        Data1() {
            let tempList = this.get('docs');
            // rearrange & filter Data 
            return tempList ;
        },
        Data2() {
            let tempList2 = this.get('docs');
            // rearrange & filter Data 
            return tempList2 ;
        },
        Data3() {
            let tempList3 = this.get('docs');
            // rearrange & filter Data 
            return tempList3 ;
        },
        }

    },
    onrender: function () {
        let DataSet1 = this.get('Data1');
        let DataSet2 = this.get('Data2');
        let DataSet3 = this.get('Data3');
        let ctx = document.getElementById("myChart");
        myChart = new Chart(ctx, { 
            type: 'doughnut',
            data: {
                labels: ["Data 1", "Data 1", "Data 3"],
                datasets: [{
                    label: 'All my Data',
                    data: [DataSet1.length, DataSet2.length, DataSet3.length]
                }]
            }
        });

    },
    onchange: function () { 
        let changedData1 = this.get('Data1');
        let changedData2 = this.get('Data2');
        let changedData3 = this.get('Data3');
        myChart.data.datasets[0].data[0] = changedData1.length;
        myChart.data.datasets[0].data[1] = changedData2.length;
        myChart.data.datasets[0].data[2] = changedData3.length;
        myChart.update();
        }
    }
});

在ractive中更新chart.js

2 个答案: