Chart.js - 样式图例 - 每行一个图例条目答案

【问题标题】：Chart.js - Styling Legend - ONE legend entry per lineChart.js - 样式图例 - 每行一个图例条目
【发布时间】：2020-04-22 07:16:38
【问题描述】：

我需要所有图例条目始终来自新行：

虽然我现在有这种情况：

我一直在搜索 Vue Chart.js legend 或 legend label 选项来帮助我，但我找不到。也许有人知道这样的选择？

我的代码：

export default {
extends : Pie,
computed: {....},
mounted() {

  this.renderChart({ .... }, {
    responsive         : true,
    maintainAspectRatio: false,

    legend             : {
      position: 'bottom',
      align: "start",

      labels:{
        boxWidth: 20,
        usePointStyle:true
        ???
      }
    }
  });
}

};

【问题讨论】：

标签： vue.js chart.js chart.js2

【解决方案1】：

无法通过 API 解决此问题（至今 - 4 月 20 日）。您应该生成 custom HTML 图例。 https://www.chartjs.org/docs/latest/configuration/legend.html#html-legends

这个想法 - 你生成（通过 for 循环）任何你想要的 HTML 标记 - 并在 DOM 中生成它（不是作为 chart.js 画布的一部分）。

** 请记住generateLegend() 图例默认情况下不可点击。

“Hello world”示例：

var data = {
  labels: [
    "Red",
    "Blue",
    "orange"
  ],
  datasets: [{
    data: [300, 50, 100],
    backgroundColor: [
      "red",
      "blue",
      "orange"
    ],
    borderWidth: 1
  }]
};

var options = {
  legend: false,
  legendCallback: function(chart) {
    var elem = [];
    elem.push('<ul class="custom-legends">');
    for (var i = 0; i < chart.data.datasets[0].data.length; i++) {
      elem.push('<li><span class="dot" style="background-color:' + chart.data.datasets[0].backgroundColor[i] + '"></span>');
      if (chart.data.labels[i]) {
        elem.push(chart.data.labels[i]);
      }
      elem.push('</li>');
    }
    elem.push('</ul>');
    return elem.join("");
  },
}
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
  type: 'doughnut',
  data: data,
  options: options
});



var legentElement = document.getElementById("legend");
/* insert custom HTML inside custom div */
legentElement.innerHTML = myChart.generateLegend();

ul.custom-legends{
  border: 1px solid black;
  list-style-type: none;
  padding-left: 0px;

}

ul.custom-legends li{
  border: 1px solid lightgray;
  list-style-type: none;
  padding: 5px;
  display: flex;
  align-items: center;
  justify-content: left;
}

.dot{
  border-radius: 50px;
  height: 10px;
  width: 10px;
  margin-right: 10px;
}

<div id="legend"></div>
<canvas id="myChart"></canvas>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>

【讨论】：