在 ractive 中更新 chart.js答案

【问题标题】：updating chart.js in ractive在 ractive 中更新 chart.js
【发布时间】：2017-10-26 06:41:36
【问题描述】：

对于一些数据可视化，我使用 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 函数中的计算值，而不是初始数据集。但我真的不知道如何将它们放入更新功能，或者这个功能是否是正确的方法......

【问题讨论】：

标签： chart.js ractivejs

【解决方案1】：

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

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

【讨论】：

感谢您的提示，但您是否知道有关如何使用它们的任何好的说明？装饰器上的 ractive 文档并不是很有帮助。我能找到的最好的是这个 [link]parhelium.pl/post/How_to_write_a_tooltip_decorator_in_RactiveJS/…，但对于我的初学者来说，它仍然很复杂。
最好的是我添加到我的答案中的链接以及您提到的链接

【解决方案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();
        }
    }
});

【讨论】：