Выпуск радиолокационной карты с помощью Chart.js - PullRequest
0 голосов
/ 11 апреля 2019

Я пытаюсь расположить радиолокационную карту, используя chart.js. Моя диаграмма выводится с выравниванием вправо.

Я пытался установить контейнер на ширину: 100%, выравнивание текста: по центру и поле: 0 автоматически, но вывод все еще не верен.

Код:

<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;
}

Скриншот вывода. Желтый цвет просто для лучшего выравнивания. Misaligned Radar Chart

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...