我只需要对齐图表图例,使它看起来不像默认显示那样杂乱,这里是我想要实现的一个例子：
请提供一些代码建议：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
- }
奇怪的是,没有实际的配置选项来实现这一点.
