我只需要对齐图表图例,使它看起来不像默认显示那样杂乱,这里是我想要实现的一个例子：
请提供一些代码建议：https://jsfiddle.net/holp/68wf75r8/
new Chart(document.getElementById("field-0"),{
type: 'pie',data: {
labels: ["Chat","Prospeção","Whatsapp","Trial","Site","Telefone","E-mail","Evento"],datasets: [{
data: [700,400,200,150,80,50,20,10],borderWidth: 2,hoverBorderWidth: 10,backgroundColor: pieColors,hoverBackgroundColor: pieColors,hoverBorderColor: pieColors,borderColor: pieColors
}]
},options: {
legend: {
labels: {
padding: 20
}
}
}
});
解决方法
您可以使用legend.labels.generateLabels钩子来自定义图例标签.
我发现,你可以把下面这样的东西调整成Chart.js计算.
我发现,你可以把下面这样的东西调整成Chart.js计算.
generateLabels: function (chart) {
chart.legend.afterFit = function () {
var width = this.width; // guess you can play with this value to achieve needed layout
this.linewidths = this.linewidths.map(function(){return width;});
};
// here goes original or customized code of your generateLabels callback
}
奇怪的是,没有实际的配置选项来实现这一点.