使用Chart.js发布定位雷达图

Question

我正在尝试使用chart.js定位雷达图。我的图表输出向右对齐。

我尝试将容器的宽度设置为：100％，text-align：center和margin：0 auto，但是输出仍然不正确。

代码：

<div class="chartholder">
                  <canvas id="myChart" width="400" height="400"></canvas>
                </div>
                <script>
                var ctx = document.getElementById("myChart").getContext('2d');

                    var marksData = {
                      labels: ["Digital Product Definition", "Digital Thread", "Digital Twin", "Digital Innovation Platform", "Top Performers", "Others"],
                      datasets: [{
                        label: "Your Company",
                        backgroundColor: "rgba(200,0,0,0.2)",
                        data: [4.8,7.2,9.6,7.2, 4, 2]
                      }]
                    };

                var radarChart = new Chart(ctx, {
                      type: 'radar',
                      data: marksData
                    });

                var chartOptions = {
                  scale: {
                    ticks: {
                      beginAtZero: true,
                      min: 0,
                      max: 10,
                      stepSize: 1
                    },
                    pointLabels: {
                      fontSize: 18
                    }
                  },
                  legend: {
                    position: 'left'
                  },
                  responsive: true,
                };
                var radarChart = new Chart(ctx, {
                    type: 'radar',
                    data: marksData,
                    options: chartOptions
                    });


                </script>

CSS

canvas {
    margin: 0 auto!important;
    width: 100%;
    height: auto;
}

.chartholder {
    text-align: center;
    width: 100%;
    margin: 0 auto;
    background-color: blue;
}

输出的屏幕截图。黄色只是为了更好地显示对齐方式。