ChartJs 饼图图例位置

Question

ChartJs 饼图在图例中有 4 个默认位置：顶部、底部、左侧和右侧。 但是需要这样的东西：

如果您需要，我有一些默认图例样式的示例： https : //codepen.io/eduardodos/pen/xxbwGpN

  options: {
    legend: {
      position: 'bottom'
    }
  }

有谁知道怎么做？

Answer 1

您可以为此使用图表插件。

看下面的代码。 我希望这能解决问题

快乐编码:)

 var oilCanvas = document.getElementById("oilChart"); Chart.defaults.global.defaultFontFamily = "Lato"; Chart.defaults.global.defaultFontSize = 18; var oilOptions = { plugins: { labels: [{ render: 'percentage', position: 'outside', textMargin: 6, render: function(args) { return `${args.label} (${args.value}%)` } }] }, legend: { display: false }, } var oilData = { labels: [ "Saudi Arabia", "Russia", "Iraq", "UAE", "Canada" ], datasets: [{ data: [133.3, 86.2, 52.2, 51.2, 50.2], backgroundColor: [ "#FF6384", "#63FF84", "#84FF63", "#8463FF", "#6384FF" ] }] }; var pieChart = new Chart(oilCanvas, { type: 'pie', data: oilData, options: oilOptions });

 <script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script> <script src="https://cdn.jsdelivr.net/gh/emn178/chartjs-plugin-labels/src/chartjs-plugin-labels.js"></script> <canvas id="oilChart" width="600" height='400'></canvas>