javascript - ChartJs 饼图图例位置

Question

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

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

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

有谁知道该怎么做？

标签： javascriptchart.jspie-chart

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>