Question

我正在使用Chart.js，我想要一个半甜甜圈图，如下图所示。但是我无法更改厚度形状

Chart.pluginService.register({
  beforeDraw: function() {
    var width = chart.chart.width,
        height = chart.chart.height,
        ctx = chart.chart.ctx;
    ctx.restore();
    var fontSize = (height / 114).toFixed(2);
    ctx.font = fontSize + "em sans-serif";
    ctx.textBaseline = "middle";

    var text = "124",
        textX = Math.round((width - ctx.measureText(text).width) / 2),
        textY = height / 2;

    ctx.fillText(text, textX, textY);
    ctx.save();
  }
});


var data = {
  labels: [
    "Red",
    "gray",
  ],
  datasets: [
    {
      data: [60, 40,],
      backgroundColor: [
        "rgb(247, 173, 181)",
        "#e6e6e6",
      ],
      hoverBackgroundColor: [
        "rgb(247, 173, 181)",
        "#e6e6e6",
      ],
      borderWidth: 0,
    },
  ],

};

const chart = new Chart(document.getElementById('halfcircle'), {
  type: 'doughnut',
  data: data,
  options: {
    responsive: true,
    legend: {
      display: false
    },
    rotation: 2.8 * Math.PI,
    circumference: 1.4 * Math.PI,
    percentageInnerCutout: 5,
    legend: {
      display: false,
    },
    tooltip: {
      enabled: true,
    },
    cutoutPercentage: 75,
    animation: {
      duration: 8000,
      easing:'easeOutBounce',
  },
  }
});

<canvas id="halfcircle" width="324" height="324"></canvas>

馅饼的

。我尝试了很多次都没用

我附上了以下代码：引用它圆形刻度，如何创建图表js，如果可以的话告诉我如何创建enter image description here enter image description here

内部半径是圆形，在Chart.js（甜甜圈图）中没有更改

0 个答案: