Chart.js 图例自定义

Question

我在为 chart.js 自定义图表图例时遇到了一些问题。这是我的圆环图的样子：

如您所见，侧面的图例未显示彩色方形图标。没错，它应该是这样的：

我的图表 HTML：

<canvas id="merchantChart" height="660" width="330"></canvas>
<div id="merchantLegend" class="chart-legend"></div>

这是我为每个切片设置颜色并覆盖由 chart.js 提供的默认图表图例的部分：

var opt = {
      type: "doughnut",
      data: { 
        labels: labelData, 
        datasets: [{ 
        data: priceData, 
        backgroundColor:  "rgba(220,220,220,0)",
        borderColor: colorArr,
        borderWidth: 1.5,
        hoverBackgroundColor: colorArr
        }] 
      }, 
      options: options
    };

    if (merchantChart) merchantChart.destroy();
    merchantChart = new Chart(ctx, opt);

    merchantChart.update(); 
    merchantLegend.innerHTML = merchantChart.generateLegend();

如您所见，因为我将每个切片的backgroundColor 设置为透明，有没有办法根据每个切片的borderColor 生成Legend()？

谢谢！

Answer 1

legendCallback方法可以被用于操纵如何legend-的标签产生。因此，使用这种可以自定义legend-的箱体颜色，以及（如使用的数据集边框颜色，而不是背景色），像这样：

legendCallback: function(chart) {
   var ul = document.createElement('ul');
   var borderColor = chart.data.datasets[0].borderColor;
   chart.data.labels.forEach(function(label, index) {
      ul.innerHTML += `
        <li>
            <span style="background-color: ${borderColor[index]}"></span>
            ${label}
         </li>
      `; // ^ ES6 Template String
   });
   return ul.outerHTML;
}

？？？?

legendCallback: function(chart) {
   var ul = document.createElement('ul');
   var borderColor = chart.data.datasets[0].borderColor;
   chart.data.labels.forEach(function(label, index) {
      ul.innerHTML += `
        <li>
            <span style="background-color: ${borderColor[index]}"></span>
            ${label}
         </li>
      `; // ^ ES6 Template String
   });
   return ul.outerHTML;
}

var chart = new Chart(ctx, {
   type: 'doughnut',
   data: {
      labels: ['Jan', 'Feb', 'Mar'],
      datasets: [{
         data: [1, 1, 1],
         backgroundColor: 'rgba(0, 0, 0, 0)',
         borderColor: ['#ff9800', '#e91e63', '#2196f3']
      }]
   },
   options: {
      responsive: false,
      legend: false,
      legendCallback: function(chart) {
         var ul = document.createElement('ul');
         var borderColor = chart.data.datasets[0].borderColor;
         chart.data.labels.forEach(function(label, index) {
            ul.innerHTML += `
            	<li>
               	<span style="background-color: ${borderColor[index]}"></span>
                  ${label}
               </li>
            `; // ^ ES6 Template String
         });
         return ul.outerHTML;
      }
   }
});

legend.innerHTML = chart.generateLegend();

.chart-container {
   display: flex;
}

#legend ul {
   list-style: none;
   font: 12px Verdana;
   white-space: nowrap;
}

#legend li span {
   width: 36px;
   height: 12px;
   display: inline-block;
   margin: 0 5px 8px 0;
   vertical-align: -9.4px;
}