Chart.js更改某些甜甜圈的大小

时间:2020-09-23 14:26:18

标签: charts

我只想更改chart.js甜甜圈中的一部分。有可能吗?

配置:

var ctx = document.getElementById("resultChart");
var myChart = new Chart(ctx, {
  type: "doughnut",
  data: {
    labels: ["Red", "Blue"],
    datasets: [{
      label: "# of Votes",
      data: [40, 60],
      backgroundColor: [
        "rgba(33, 178, 82, 1)",
        "rgba(239, 239, 239, 1)"
      ],
      hoverBackgroundColor: [
        "rgba(33, 178, 82, 1)",
        "rgba(239, 239, 239, 1)"
      ],
      shadowOffsetX: [2, 0],
      shadowOffsetY: [2, 0],
      shadowBlur: [20, 0],
      shadowColor: ["rgb(33, 178, 82)", "rgb(239, 239, 239)"],
      borderWidth: 0
    }]
  },
  options: {
    animation: { duration: 1000 },
    cutoutPercentage: 0,
    responsive: true,
    maintainAspectRatio: false,
    rotation: 1 * Math.PI,
    circumference: 1 * Math.PI,
    legend: {
      display: false
    },
    tooltips: {
      enabled: false
    },
    layout: {
      padding: {
        left: 20,
        bottom: 20,
        top: 20,
      }
    }
  }
});

这是我的结果: https://jsfiddle.net/c1d9jvmh/

我想要这样:

enter image description here

需要减小灰色区域的大小。

0 个答案:

没有答案