javascript - 圆形独立固定边框，内部带有条形图

Question

我们在用chartjs 制作的条形图的边界在由边距分隔的固定外部边界内四舍五入时遇到困难。我们如何在外部固定边框内将图表四舍五入？

到目前为止，我们已经能够做到以下几点：

var options = {
  legend: { display: false },
  //Border radius; Default: 0; If a negative value is passed, it will overwrite to 0;
  cornerRadius: 100,
  //Default: false; if true, this would round all corners of final box;
  fullCornerRadius: true,
  //Default: false; if true, this rounds each box in the stack instead of only final box;
  stackedRounded: true,
  elements: {
    point: {
      radius: 25,
      hoverRadius: 35,
      pointStyle: 'rectRounded',
    }
  },
  scales: {
    yAxes: [{
      stacked: true,
      display: true,
      radius: 25,
      ticks: {
        fontColor: '#B6ABC2',
        fontSize: 60,
        fontFamily: 'Helvetica',
      },
      gridLines: {
        display: false
      },
    }],
    xAxes: [{
      stacked: false,
      ticks: {
        beginAtZero: true,
      },
      display: false,
      gridLines: {
        offsetGridLines: false
      },
    }],
  }
};
function BarChart() {
  useEffect(() => {
    /**Generate Chart**/
    var ctxBar = document.getElementById("myChart");
    new Chart(ctxBar, {
      type: 'horizontalBar',
      data: data,
      options: options
    });
  });
  return <canvas id="myChart"></canvas>;
}

这是我们想要的结果

这是我们目前得到的结果

如果需要，将很乐意提供更多代码

标签： javascriptreactjschartschart.js