我有兩個關于使用 Chart.js 的問題。
有什么方法可以洗掉垂直網格線。我認為它們在我的條形圖中沒有任何用途,沒有它們看起來更干凈一些。
當圖表調整大小時,有沒有辦法讓它們保持原來的高度?它們似乎保持了它們的寬度/高度比。我想我想保持高度不變。
uj5u.com熱心網友回復:
您可以使用禁用垂直線顯示,x: { grid: { display: false并且可以通過添加來固定高度maintainAspectRatio: false,。你沒有提供你的圖表,所以希望啟動器適用于這個例子。
const ctx = document.getElementById('myChart');
const myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
maintainAspectRatio: false,
scales: {
x: {
grid: {
display: false
}
},
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.8.0/chart.min.js" integrity="sha512-sW/w8s4RWTdFFSduOTGtk4isV1 190E/GghVffMA9XczdJ2MDzSzLEubKAs5h0wzgSJOQTRYyaz73L3d6RtJSg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<canvas id="myChart" width="400" height="400"></canvas>
轉載請註明出處,本文鏈接:https://www.uj5u.com/net/487593.html
標籤:javascript html css 图表.js
