新数据不显示图表 js

Question

使用折线图js。需要制作 show/hide 个数据集

的复选框

我做了这样的东西：

lineChartData = {
                        labels : ["01.01.2015","012.01.2015","03.01.2015","04.01.2015","05.01.2015","06.01.2015","07.01.2015"],
                        datasets : dataSets
                    };

其中 dataSets 是数据集对象的数组，当复选框更改时我执行下一步：

                    if($(this).prop('checked')){

                                myNewChart.datasets[datasetId] = dataSets[datasetId];
                            }
                    else{
                                myNewChart.datasets[datasetId]= {};
                            }

                            myNewChart.update();

myNewChart.datasets[datasetId]= {};工作并删除图表上的线，但添加数据集不显示线，但它添加在 myNewChart.datasets 数组中。

Answer 1

只需销毁并重新绘制图表即可。虽然 Chart.js 确实支持添加和删除线点 - 它是按标签（而不是按数据集 - 这是你想要的）

你的问题是你正在清空实际的数据集对象 - 如果你 link 它到数据集的副本一切正常。

这是您更新的更改处理程序

$('input:checkbox').change(function () {
    var chartId = $(this).attr('data-chart-id');
    var datasetId = $(this).attr('data-data-set');

    dataSets[datasetId].hide = !$(this).prop('checked')

    lineChartData.datasets = []
    dataSets.forEach(function (dataset) {
        // create a copy of the dataset to modify (if required) and put into the chart dataset array
        var copy = jQuery.extend(true, {}, dataset)
        if (dataset.hide)
            copy.data = []
        lineChartData.datasets.push(copy)
    })

    // create the graph from scratch
    myNewChart.destroy()
    myNewChart = new Chart(ctx).Line(lineChartData, chartOpt);
});

Fiddle - http://jsfiddle.net/6qdm7nwu/

新数据不显示图表 js

New datases do not shows Chart js

chart.js