Событие onClick для скрытия набора данных Chart.js V2

Как я могу сделать легенду html из Chart.js, чтобы скрыть/показать 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();
        },

Но я понятия не имею, как заставить его работать с событием onClick в html-легенде.

имена меток берутся из базы данных, поэтому они могут меняться.

ОБНОВЛЕНИЕ 1

Нашел этот Github, пытаясь заставить его работать


javascript html chart.js legend-properties
person dpanegassi    schedule 15.09.2016    source источник

Ответы (1)


arrow_upward
5
arrow_downward

Итак, я понял это правильно после этого сообщения.

Вот код поста

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();
};

секрет здесь в legendCallback в строке 3

В этом примере он использует линейный график, в моем случае я использовал столбцы

Поэтому я заменил табличные теги на теги списка, чтобы так работало лучше.

Он подчеркивает необходимость поставить window перед переменной, которая получает = new Chart.

window.weightChart = новая диаграмма (ctx, {.....

Затем, немного поработав с CSS, вы можете получить красивую легенду с опцией скрытия/отображения.

person dpanegassi    schedule 15.09.2016