如何使用ChartJS

时间:2019-12-09 20:26:11

标签: javascript canvas charts chart.js chartjs-2.6.0

我从图表中获得了数据集,我想对其进行重组以使其看起来更好。

这是我的图表 OriginalChart

,这将是我的图表,当我从中删除2个元素标签时,其想法是重新组织所有内容并删除带有值为0的红色框的元素,换句话说,仅显示具有不同值的数据大于0 ... ChartWithDataToOrganize

这个想法很简单,只过滤所有等于0的数据值,但是我真的不知道是否有工具可以在再次显示所有数据时也将其反转。 labels

我实现了在单击图例时可以看到如何隐藏元素的功能,但是如何实现在其中隐藏== 0的数据然后在取消隐藏并像第一次看到它时将其反转。.< / p>

legend: {
                            display: true,
                            onClick: function(e, legendItem) {
                            var index = legendItem.datasetIndex;
                            var actualChart = this.chart;
                            //If the actual label is not hidden, I set it up as false, otherwise is null
                            var alreadyHidden = (actualChart.getDatasetMeta(index).hidden === null) ? false : actualChart.getDatasetMeta(index).hidden;
                            actualChart.data.datasets.forEach(function(e, i) {
                                var meta = actualChart.getDatasetMeta(i);
                                if (i === index) {//I check if the selected label is already hidden otherwise I hide it
                                    if(!alreadyHidden){
                                        meta.hidden = true;
                                    }else{
                                        meta.hidden = null;
                                    }
                                }
                            });
                            actualChart.update();
                            },

                        },

我正在使用ChartJs 2.8.0 在Chrome上

我没有放置任何数据条目,因为标签只是名称,其他的returnData()只是%

1 个答案:

答案 0 :(得分:0)

我设法通过创建我的datasetsLabels的实际副本的副本并设置新配置来做到这一点,以防再次显示所选标签时,我只是将新dataSetLabel替换为之前的先前数据集。 / p>