如果你们浏览了这篇文章，并尝试了张贴的答案，但没有工作，尝试这一个：

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("");
  },

然后在下面添加：

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

要创建图例，请确保具有元素<div id="chart-legends"></div>

有一个legendCallback函数：

图例回调*函数 * function (chart) { }

用于生成图例的函数。接收要从中生成图例的图表对象。默认实现返回HTML字符串。
详细信息可在此处找到
see this issue表示默认图例回调：

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(''); 
}

我希望这对你有帮助
第一个
Codepen Example

如果人们在ChartJS 3.6.0中寻找解决方案（也可能是其他版本）
它们提供了一个HTML图例，您可以在其中使用插件选项指定所需的确切HTML。以下是配置示例沿着指向以下文档的链接。

const config = {
  type: 'line',
  data: data,
  options: {
    plugins: {
      htmlLegend: {
        // ID of the container to put the legend in
        containerID: 'legend-container',
      },
      legend: {
        display: false,
      }
    }
  },
  plugins: [htmlLegendPlugin],
};

ChartJS HTML Legend

这个代码对我有用

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();  
};

图表JS 3.0+

我知道这个问题是专门针对chartJS 2.0的，但这是我发现的在chartJS中解决自定义图例问题的最大线索之一，所以我想分享一下我在chartJS 3.0+中添加自定义图例的发现，该发现不赞成使用generateLegend()函数。
在chartJS 3.0+中添加图例需要使用plugins。
基本上，您可以在示例化图表时创建一个自定义插件。例如：

const context = document.querySelector("#chart-id");
const chart = new Chart(context, {
  type: "doughnut",
  data,
  options,
  plugins: [{
    beforeInit: function(chart, args, options) {
      // Make sure we're applying the legend to the right chart
      if (chart.canvas.id === "chart-id") {
        const ul = document.createElement('ul');
        chart.data.labels.forEach((label, i) => {
          ul.innerHTML += `
            <li>
              <span style="background-color: ${ chart.data.datasets[0].backgroundColor[i] }">
                ${ chart.data.datasets[0].data[i] }
              </span>
              ${ label }
            </li>
          `;
        });

        return document.getElementById("js-legend").appendChild(ul);
      }

      return;
    }
  }]  
});

下面的working jsfiddle演示了这种添加自定义图例的方法。