从 Chart.js 动态添加和删除数据集答案

【问题标题】：Dynamically Add and Remove Datasets from Chart.js从 Chart.js 动态添加和删除数据集
【发布时间】：2020-06-03 08:30:54
【问题描述】：

我的任务是使用 asp.net 框架制作一个类似于 tableau 的基于 Web 的数据可视化工具。用户可以将代表表的块拖放到拖放区，然后触发 javascript 函数以添加数据。这是代码：

function addData(chart, Datalabel, Tabledata, Xlabel, Ylabel, labelsSet) {
        datasintable.push(Tabledata);
        var curColor = randomColor();
        chart.data.labels = labelsSet;
        chart.data.datasets.push({
            label: Datalabel,
            fill: false,
            backgroundColor: curColor,
            borderColor:  curColor,
            data: Tabledata
        });
        chart.options = {
            legend: {
                display:false
            },
            scales: {
                xAxes: [{
                    scaleLabel: {
                        labelString: Xlabel
                    }
                }],
                yAxes: [{
                    scaleLabel: {
                        labelString: Ylabel
                    }
                }]
            }
        }
        chart.update();
    }

这部分代码工作正常，问题在于删除数据，由于索引问题。现在每个可拖动组件都有自己的 id，然后读取并解释为我通过 if else 确定的某个数字。当然，由于项目用户交互的不可预测性，这种方法不起作用，因为索引指针需要是动态的，而在我的代码中它不是。现在删除数据的代码是这样的：

function hide(chart, index) {
        datasintable.splice(index, 1);
        chart.data.datasets[index].data = 0;
        chart.update();
    }

索引变量由 if else 条件决定，如下所示：

var data = ev.target.id

 if (data == "pop") {
            popdth = "0";
            addData(lineChart, 'Population', @Html.Raw(Json.Serialize(ViewBag.population)), 'Year', 'Population', @Html.Raw(Json.Serialize(ViewBag.year)));
        }
        else if (data = "dth") {
            popdth = "1";
            addData(lineChart, 'Death Rate', @Html.Raw(Json.Serialize(ViewBag.death)), 'Year', 'Population', @Html.Raw(Json.Serialize(ViewBag.yeardeath)));
        }

（'pop' 和 'dth' 是我为可拖动对象设置的 id）

我应该如何解决这个问题，以便在图表中添加和删除数据都是动态的？

【问题讨论】：

标签： javascript html asp.net-mvc visual-studio web

【解决方案1】：

没关系，最后我做了一些计算来计算每个可拖动对象的位置，然后通过变量将可拖动对象的索引分配给所述计算的值

【讨论】：