onClick事件以隐藏数据集Chart.js V2 [英] onClick event to Hide dataset Chart.js V2

问题描述

如何从 Chart.js 制作html图例，以隐藏/显示图表的 dataset ，就像由 Chart.js生成的图例一样本身

How can I make a html legend from Chart.js to hide/show the dataset of the chart, like the legend generated by the Chart.js itself

图例-> Chart.js图例

Legend on bottom -> Chart.js legend

图例-> HTML

如何单击"SETOR AGILIZA"并获取相对于它的 dataset 隐藏/显示

How can I click in "SETOR AGILIZA" and get the dataset relative to it hide/show

我在chat.js/core.legend.js中找到了此代码

I found this code in the chat.js/core.legend.js core.legend

onClick: function(e, legendItem) {
            var index = legendItem.datasetIndex;
            var ci = this.chart;
            var meta = ci.getDatasetMeta(index);

            // See controller.isDatasetVisible comment
            meta.hidden = meta.hidden === null? !ci.data.datasets[index].hidden : null;

            // We hid a dataset ... rerender the chart
            ci.update();
        },

但是我不知道如何使它在html图例中的 onClick 事件上工作

But I have no clue how to get it to work on a onClick event in the html legend

标签名称来自数据库，因此可以更改.

the labels names are get from a database, so they can change.

更新1

找到了这个 Github ，试图使其工作

Found this Github, trying to make it work

推荐答案

因此，我按照帖子

这是帖子的代码

var weightChartOptions = {
        responsive: true,
        legendCallback: function(chart) {
            console.log(chart);
            var legendHtml = [];
            legendHtml.push('<table>');
            legendHtml.push('<tr>');
            for (var i=0; i<chart.data.datasets.length; i++) {
                legendHtml.push('<td><div class="chart-legend" style="background-color:' + chart.data.datasets[i].backgroundColor + '"></div></td>');                    
                if (chart.data.datasets[i].label) {
                    legendHtml.push('<td class="chart-legend-label-text" onclick="updateDataset(event, ' + '\'' + chart.legend.legendItems[i].datasetIndex + '\'' + ')">' + chart.data.datasets[i].label + '</td>');
                }                                                                              
            }                                                                                  
            legendHtml.push('</tr>');                                                          
            legendHtml.push('</table>');                                                       
            return legendHtml.join("");                                                        
        },                                                                                     
        legend: {                                                                              
            display: false                                                                     
        }                                                                                      
    };                                                                                         

    // Show/hide chart by click legend
    updateDataset = function(e, datasetIndex) {
        var index = datasetIndex;
        var ci = e.view.weightChart;
        var meta = ci.getDatasetMeta(index);

        // See controller.isDatasetVisible comment
        meta.hidden = meta.hidden === null? !ci.data.datasets[index].hidden : null;

        // We hid a dataset ... rerender the chart
        ci.update();
    };

    var ctx = document.getElementById("weightChart").getContext("2d");
    window.weightChart = new Chart(ctx, {
        type: 'line',
        data: weightChartData, 
        options: weightChartOptions
    });
    document.getElementById("weightChartLegend").innerHTML = weightChart.generateLegend();
};

这里的秘密是第3行中的 legendCallback

the secret here is the legendCallback in line 3

在此示例中，他使用折线图，在我的情况下，我使用条形图

In this example he uses line chart, in my case I used bars

所以我将 list标记更改为 list标记，这样我的工作效果更好

So i changed the table tags for list tags for me worked better this way

他强调将窗口" 放在获得"= new Chart"

window.weightChart =新图表(ctx，{.....

window.weightChart = new Chart(ctx, {.....

然后使用少量CSS，您可以通过隐藏/显示选项获得漂亮的图例

Then with a little of CSS you can get a nice legend with a hide/show option

这篇关于onClick事件以隐藏数据集Chart.js V2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！