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

Question

I have been tasked with making a web-based data visualizer kind of like tableau using the asp.net framework. The user can drag and drop blocks which represents tables to a dropzone, which then triggers the javascript function for adding data. This is the code:

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();
    }

This part of the code is working fine, the problem is in removing the data, due to index issues. Right now each draggable component has it's own id which is then read and interpreted as a certain number I determined via an if else. Of course, due to the unpredictable nature of the user interaction the project, this approach does not work because the index pointer needs to be dynamic whereas in my code it is not. Right now the code for removing data is like this:

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

and the index variable is determined by if else conditions like these:

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' and 'dth' is the id I set for the draggables)

How should I approach this problem so that both adding and removing data to the chart is dynamic?

Answer 1

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