Javascript 使用ChartJS v2.0自定义图例

我正在尝试在ChartJSV2.0中创建一个自定义图例模板。在ChartJS的v1*中，我只是向新的图表构造函数添加了一个属性，例如

legendTemplate : '<ul>'
+'<% for (var i=0; i<datasets.length; i++) { %>'
+'<li>'
+'<span style=\"background-color:<%=datasets[i].lineColor%>\"></span>'
+'<% if (datasets[i].label) { %><%= datasets[i].label %><% } %>'
+'</li>'
+'<% } %>'
+'</ul>'

legendTemplate:“
”
+''
+''
+“”
+''
+“
”

我似乎在v2.0中找不到任何关于此选项的文档。它还能用吗？有谁能举例说明如何做到这一点

谢谢大家!

更新-下面的工作代码

legendCallback: function(chart) {
                console.log(chart.data);
                var text = [];
                text.push('<ul>');
                for (var i=0; i<chart.data.datasets[0].data.length; i++) {
                    text.push('<li>');
                    text.push('<span style="background-color:' + chart.data.datasets[0].backgroundColor[i] + '">' + chart.data.datasets[0].data[i] + '</span>');
                    if (chart.data.labels[i]) {
                        text.push(chart.data.labels[i]);
                    }
                    text.push('</li>');
                }
                text.push('</ul>');
                return text.join("");
            }

legendCallback:函数（图表）{
控制台日志（图表数据）；
var text=[]；
text.push（“
”）；
对于（var i=0；i有一个
legendCallback
函数：

legendCallback函数
函数（图表）{}


函数生成图例。接收要从中生成图例的图表对象。默认值
实现返回一个HTML字符串


对于默认图例回调：

legendCallback: function(chart) { 
    var text = []; 
    text.push('<ul class="' + chart.id + '-legend">'); 
    for (var i = 0; i < chart.data.datasets.length; i++) { 
        text.push('<li><span style="background-color:' + 
                   chart.data.datasets[i].backgroundColor + 
                   '"></span>'); 
        if (chart.data.datasets[i].label) { 
            text.push(chart.data.datasets[i].label); 
        } 
        text.push('</li>'); 
    } 
    text.push('</ul>'); 
    return text.join(''); 
}

legendCallback:函数（图表）{
var text=[]；
text.push（“
”）；
对于（var i=0；i”）；
if（chart.data.datasets[i].label）{
text.push（chart.data.datasets[i].label）；
} 
text.push（“”）；
} 
text.push（“
”）；
返回text.join（“”）；
}
如果你们浏览了这篇文章，并尝试了发布的答案，但没有成功，
试试这个：

  legendCallback: function(chart) {
    var text = [];
    text.push('<ul>');
    for (var i=0; i<chart.data.datasets.length; i++) {
      console.log(chart.data.datasets[i]); // see what's inside the obj.
      text.push('<li>');
      text.push('<span style="background-color:' + chart.data.datasets[i].borderColor + '">' + chart.data.datasets[i].label + '</span>');
      text.push('</li>');
    }
    text.push('</ul>');
    return text.join("");
  },

创建图例。请确保您有一个元素
此代码适用于我

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 < chart.data.datasets[0].label.length; i++) {
        if (chart.data.datasets[0].label[i] === label) {
            chart.data.datasets[0].label
            exists = true;
            chart.data.datasets[0].label.push(store.splice(i, 1)[0][1]);
            chart.data.datasets[0].backgroundColor.push(bgcolor.splice(i, 1)[0][1]);
            chart.data.datasets[0].data.push(dataSets.splice(i, 1)[0][1]);      
        }
    }
    if (!exists) {
        chart.data.datasets[0].label.push(label);
        chart.data.datasets[0].backgroundColor.push(color);
        chart.data.datasets[0].data.push(data);
        exists = false;
    }
    chart.update();  
};

updateDataset=函数（目标、图表、标签、颜色、数据）{
var store=chart.data.datasets[0]。标签；
var bgcolor=chart.data.datasets[0]。背景色；
var dataSets=chart.data.dataSets[0].data；
var=false；
对于（var i=0；i
我希望这会对您有所帮助


var配置={
键入：“甜甜圈”，
数据：{
数据集：[{
数据：[
50,
60,
20
],           
背景颜色：[
“#33b35a”，
“#ffce56”，
“#4BC0C0C0”，
“#CDDC39”，
“#9C27B0”，
“#fb7145”，
“#5971f9”
],
标签：“能源使用”
}],
标签：[
“E1”，
“E2”，
‘E3’
]
},
选项：{
回答：是的，
图例：{
显示：假
},
legendCallback:函数（图表）{
//在这里返回HTML字符串。
日志（图表、数据、数据集）；
var text=[]；
text.push（“
”）；
对于（var i=0；i”）；
if（chart.data.labels[i]）{
text.push（chart.data.labels[i]）；
}
text.push（“”）；
}
text.push（“
”）；
返回text.join（“”）；
},
标题：{
显示：假，
文本：“Chart.js甜甜圈图表”
},
动画：{
没错，
动画片：真
},
工具提示：{
模式：“索引”，
交集：错，
回调：{
标签：函数（工具提示项、数据）{
设label=data.datasets[tooltipItem.datasetIndex].label+'-'+data.labels[tooltipItem.index]；
让datasetLabel=data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index]；
返回标签+'：'+datasetLabel.toLocaleString（）；
}
}
},
}
};
var ctxd=document.getElementById（'canvas'）.getContext（'2d'）；
window.myDoughnut=新图表（ctxd，configd）；
$（“#do#u legend”）.html（window.myDoughnut.generateLegend（））；
//通过单击图例显示/隐藏图表
updateDataset=函数（e，datasetIndex）{
var指数=数据集指数；
var ci=e.view.myDoughnut；
var meta=ci.getDatasetMeta（0）；
var result=（meta.data[datasetIndex].hidden==true）？false:true；
如果（结果==真）
{
meta.data[datasetIndex].hidden=true；
$（'#'+e.path[0].id）.css（“文本装饰”，“行通过”）；
}否则{
$（'#'+e.path[0].id）.css（“文本装饰”，即“）；
meta.data[datasetIndex].hidden=false；
}
ci.update（）；
}；
\do\u图例{
高度：62px；
}
#杜奥传说{
宽度：100%；
}
#杜威传奇>ul{
填充：0；
文本对齐：居中；
}
#你知道吗{
宽度：100%；
底部：10%；
}
#你知道李吗{
光标：指针；
保证金：4px 3px；
显示：内联表；
}
#你是李斯潘吗{
位置：相对位置；
填充：3x10px；
边界半径：13px；
颜色：白色；
z指数：2；
字体大小：11px；
}
#杜奥传说{
高度：62px；
溢出y：自动；
}
.甜甜圈区{
高度：计算（100%-62px）
}

可以显示如何使用此方法生成自定义图例的示例？以及如何隐藏生成的默认图例？有什么想法吗？此方法生成图例，以便
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 < chart.data.datasets[0].label.length; i++) {
        if (chart.data.datasets[0].label[i] === label) {
            chart.data.datasets[0].label
            exists = true;
            chart.data.datasets[0].label.push(store.splice(i, 1)[0][1]);
            chart.data.datasets[0].backgroundColor.push(bgcolor.splice(i, 1)[0][1]);
            chart.data.datasets[0].data.push(dataSets.splice(i, 1)[0][1]);      
        }
    }
    if (!exists) {
        chart.data.datasets[0].label.push(label);
        chart.data.datasets[0].backgroundColor.push(color);
        chart.data.datasets[0].data.push(data);
        exists = false;
    }
    chart.update();  
};