Я пытаюсь расположить радиолокационную карту, используя 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;
}
Скриншот вывода. Желтый цвет просто для лучшего выравнивания.