ChartJs 无限循环

Question

我有一个刚刚创建的空 chart.js 图表，它卡在动画无限循环中。为什么？我做错了什么？

var initData=
{
  type: "polarArea",
  data: {datasets:[]},
  options: {
    plugins: {},
    responsive: true,
    maintainAspectRatio: false,
    scales: {
      r: {}
    }
  }
};

var context = document.getElementById('test').getContext('2d');
var chart = new Chart(context, initData);

<script src="https://cdn.jsdelivr.net/npm/chart.js@3.5.1/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></script>
<div><canvas style="margin: 0.5em; width: 100%; height: 20em" id="test"></canvas></div>

Answer 1

这似乎是因为 chart.js 不喜欢少量的边距，如果你增加它就可以正常工作，或者如果你在它周围放置一个 div 并在上面加上边距它似乎也工作正常：

var initData = {
  type: "polarArea",
  data: {
    labels: ['a', 'b'],
    datasets: [{
      data: [2, 4]
    }]
  },
  options: {
    plugins: {},
    responsive: true,
    maintainAspectRatio: false,
    scales: {
      r: {}
    }
  }
};

var context = document.getElementById('test').getContext('2d');
var chart = new Chart(context, initData);

<script src="https://cdn.jsdelivr.net/npm/chart.js@3.5.1/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></script>

<div>
  <div style="margin: 0.5em;">
    <canvas style="width: 100%; height: 20em;" id="test"></canvas>
  </div>
</div>

编辑：
我不完全正确，较大的边距修复了它，它恰好是一个正确的数字。

Chart.js 确实需要图表周围有一个专用容器，以便保证金能够正常运行，如文档 here

中所述

ChartJs 无限循环

ChartJs in endless loop

javascript

chart.js