Custom Legend with ChartJS v2.0

匿名 (未验证) 提交于 2019-12-03 01:25:01

问题:

I'm trying to create a custom legend template in ChartJS v2.0. In v1* of ChartJS I simply added a property to the new Chart constructor such as...

legendTemplate : '
    ' +'' +'
  • ' +'\">' +'' +'
  • ' +'' +'
'

I can't seem to find any documentation in v2.0 for this option. Is it even available anymore? Can anyone show an example of how to accomplish this?

Thank you!

Update - Working code below

legendCallback: function(chart) {                 console.log(chart.data);                 var text = [];                 text.push('
    '); for (var i=0; i'); text.push('' + chart.data.datasets[0].data[i] + ''); if (chart.data.labels[i]) { text.push(chart.data.labels[i]); } text.push(''); } text.push('
'); return text.join(""); }

回答1:

There is a legendCallback function:

legendCallback Function function (chart) { }
Function to generate a legend. Receives the chart object to generate a legend from. Default implementation returns an HTML string.

Details can be found here: http://www.chartjs.org/docs/latest/configuration/legend.html#html-legends



回答2:

If you guys run through this post and tried the posted answer and didn't work, try this one:

  legendCallback: function(chart) {     var text = [];     text.push('
    '); for (var i=0; i'); text.push('' + chart.data.datasets[i].label + ''); text.push(''); } text.push('
'); return text.join(""); },

Then add this below:

document.getElementById('chart-legends').innerHTML = myChart.generateLegend(); 

To create the legends. Make sure you have an element



回答3:

This code is working for me

updateDataset = function(target, chart, label, color, data) {     var store = chart.data.datasets[0].label;     var bgcolor = chart.data.datasets[0].backgroundColor;     var dataSets = chart.data.datasets[0].data;     var exists = false;     for (var i = 0; i 


标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!