ChartJs饼图例位置

Question

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

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

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

有人知道该怎么做吗？

Answer 1

您可以使用chart piece plugin。

请参见以下代码。我希望这可以解决问题

快乐编码：）

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/[email protected]"></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>