ChartJs饼图例位置

时间:2019-12-06 12:23:11

标签: javascript chart.js pie-chart

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

enter image description here

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

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

有人知道怎么做吗?

1 个答案:

答案 0 :(得分: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/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>