繁体   English   中英

Chart.js:获取隐藏数据集

[英]Chart.js: Get Hidden Datasets

我有一个使用 Chart.js 的多系列折线图,我一直在试图弄清楚如何从 Chart.js 对象中获取隐藏的数据集。 我想在图表之外的表格中显示过滤后的数据。

我尝试为每个数据集添加一个隐藏变量,但我仍然无法检索隐藏了哪些数据集。

你如何隐藏你的数据集?
我刚刚检查了 Chart.js 文档,发现它们有隐藏选项。
那么,你为什么看不到隐藏选项?

// test chart.
var data =  {
    labels: ["Item1", "Item2", "Item3", "Item4", "Item5", "Item6", "Item7"],
    datasets: [
        {
            label: "line-1",
            borderColor: 'rgb(255, 0, 0)',
            data: [20, 26, 12, 43, 33, 21, 29],
            // hidden
            hidden: true
        },
        {
            label: "line-2",
            borderColor: 'rgb(0, 255, 0)',
            data: [10, 3, 24, 43, 23, 11, 51],
        },
        {
            label: "line-3",
            borderColor: 'rgb(0, 0, 255)',
            data: [16, 31, 22, 53, 24, 27, 69],
        }
    ]
};

// For hidden Label. (I don't know why datasets hasn't this option.)
var options = {
    legend: {
        labels: {
            filter: function(item, chart) {
                return !item.hidden;
            }
        }
    }
};

// Create the chart.
var myLineChart = new Chart($("#chart"), {
    type: 'line',
    data: data,
    options: options
});

// Get the hidden datasets based on the hidden column.
var hiddenDatasets = $.grep(myLineChart.data.datasets, function(line) {
    return line.hidden;
});

// See console.
console.log(hiddenDatasets);

这是jsfiddle。

更新我发现有一个有用的方法可用。

var hiddenDatasets = [];
for(var i=0; i<myLineChart.data.datasets.length; i++) {
    // It seems some value updated in metadata, but there is a method available.
    // var metaDatasets = myLineChart.getDatasetMeta(i);
    if (!myLineChart.isDatasetVisible(i)) {
        // or myLineChart.getDatasetMeta(i);
        hiddenDatasets.push(myLineChart.data.datasets[i]);
    }
 }
 // See console.
 console.log(hiddenDatasets);

jsfiddle。

发现这个线程谷歌搜索,所以如果仍然没有比逐个检查数据集更好的方法,这里有一个 filter() 版本来复制粘贴:

myChart.data.datasets.filter((ds, i) => !myChart.isDatasetVisible(i) ? ds : undefined);

或者反过来只得到可见的:

myChart.data.datasets.filter((ds, i) => myChart.isDatasetVisible(i) ? ds : undefined);

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM