onclick事件隐藏数据集chart.js之V2

如何使从Chart.js一个html传奇隐藏/显示图表dataset，如由Chart.js本身onclick事件隐藏数据集chart.js之V2

传奇生成的传说底部 - > 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，试图使其工作

来源

2016-09-15 dpanegassi

所以，我这样做是正确下面这个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(); 
};

这里的秘密是legendCallback的3线

在这个例子中，他使用折线图，在我的情况下，我用吧

所以我改变了表标签为列表标签为我工作这样更好

他强调把“窗口”谁得到“=新图”

变量之前210
window.weightChart =新图（CTX，{.....

然后一点点CSS，你可以得到一个不错的传说有隐藏/显示选项

来源

2016-09-15 20:51:43 dpanegassi

onclick事件隐藏数据集chart.js之V2

回答

相关问题