javascript - 如何在chart.js中从中心推动极区切片

Question

我在我的 Angular 应用程序中使用 chart.js 来绘制极区图。问题是我需要将图像放在图表的中心。我使用css制作的，但随后出现了其他问题，当切片的值太低时，它会被图像隐藏：带有图片的图表。这是没有图像的样子：没有图片的图表。那么无论如何要在特定数量的像素上从中心“推动”切片吗？谢谢您的回答。

这是我的 HTML：

    <div id="perspectives-pie-diagram">
      <canvas id="myChart" style="height:100%;" ></canvas>
      <div id="pie-image-container">
        <img id="pie-image" src="../../assets/KP-logotype/KP-logotype-006F91-chip.png" />
      </div>
    </div

角代码：

ngOnInit() {

    var ctx = document.getElementById('myChart');
    var myChart = new Chart('myChart', {
      type: 'polarArea',
      options: {
        scale: {
          gridLines: {
            display: false
          },
          ticks: {
            display: false
          }
        }
      },
      data: {
        datasets: [{
          data: [5, 10, 12, 25,22, 26],
          backgroundColor: [
            '#544595',
            '#009EE3',
            '#009640',
            '#FFCC00',
            '#ED7102',
            '#E30513'
          ]
        }]
      }
    });
  }

最后我的CSS：

#perspectives-pie-diagram{
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
}

#myChart{
    position:absolute;
}

#pie-image-container {
  height: 80px;
  width: 80px;
  position: absolute;
  border-radius: 50%;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #006F91;
}

#pie-image{
    height:50px;
    width:50px;
}

标签： javascripthtmlcssangularchart.js