onClick 事件隐藏数据集 Chart.js V2

Posted

技术标签:

【中文标题】onClick 事件隐藏数据集 Chart.js V2【英文标题】:onClick event to Hide dataset Chart.js V2 【发布时间】:2017-01-23 21:13:03 【问题描述】:

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

底部图例 -> Chart.js 图例

右侧图例-> HTML

我怎样才能点击“SETOR AGILIZA”并获得dataset相对于它的隐藏/显示

我在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 事件中工作

标签名称取自数据库,因此可以更改。

更新 1

找到这个Github,试图让它工作

【问题讨论】:

【参考方案1】:

所以,我在Post 之后做对了

这是帖子的代码

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

在这个例子中他使用了折线图,在我的例子中我使用了条形图

所以我为 list tags 更改了 table tags,这样我工作得更好

他强调将"window"放在获取"= new Chart"的变量之前

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

然后用一点 CSS 你可以得到一个带有隐藏/显示选项的漂亮图例

【讨论】:

以上是关于onClick 事件隐藏数据集 Chart.js V2的主要内容,如果未能解决你的问题,请参考以下文章

鼠标单击Chart.js创建数据点

Chart.js - 如何在加载时将折线图数据集设置为禁用

Chart.js 从图例中删除数据集值的标签

无法在 onclick 事件中使用 d 函数读取当前数据集元素

如何在Chart js中为数据集添加偏移量

Chart.js - 鼠标悬停时自定义css到数据集