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

Question

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

我尝试将容器设置为 width: 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;
}

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

Answer 1

有点晚了，但他来了解决方案。 该问题与标签的长度有关。尝试以相似的大小对标签进行分段，例如，如果您有“热门技术”和“新 GPUS”之类的标签，您的图表将会扭曲，因此将第一个标签分成多个部分，以便它可以匹配“新 GPUS”的大小”

// before
labels: ["Really long label", "This is twice long label"]
// after
labels: [ ["Really","Long","Label"], ["This is", "twice", "long label"]]