我想使用
所以我按照說明進行操作，我有類似的東西：
TS：
createAreaChart() {
this.barChart1 = document.getElementById('barChart1');
this.ctx1 = this.barChart1.getContext('2d');
let i = 0;
this.data1.forEach(div => {
if(i==0){
this.backgroundColors.push('#A60A2D');
} if(i==1) {
this.backgroundColors.push('#00A2C3');
} if(i==2) {
this.backgroundColors.push('#434F55');
i = -1;
}
i ;
});
this.chart1 = new Chart(this.ctx1, {
type: 'bar',
data: {
labels: this.data1.map(r => r.icon),
datasets: [{
data: this.data1.map(r => r.total),
label: 'Annual Cost',
backgroundColor: this.backgroundColors,
borderColor: this.backgroundColors,
borderWidth: 1
}]
},
options: {
legend: {
display: false
},
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
var value = data.datasets[0].data[tooltipItem.index];
if (parseInt(value) >= 1000) {
return '$' value.toFixed(2).toString().replace(/\B(?=(\d{3}) (?!\d))/g, ",");
} else {
return '$' value.toFixed(2).toString();
}
}
}
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
precision: 2,
userCallback : function(value, index, values) {
if(parseInt(value) >= 1000){
return '$' value.toString().replace(/\B(?=(\d{3}) (?!\d))/g, ",");
} else {
return '$' value;
}
}
}
}]
}
}
});
this.chart1.height = 225;
}
HTML
<div class="card chart-card">
<div class="card-header">
<div class="card-title">Test</div>
</div>
<div class="card-body">
<div class="chart">
<canvas id="barChart1" height="220px"></canvas>
</div>
</div>
</div>
但出于某種原因，我得到了一個這樣的垂直條：
我該如何將其更改為水平方向，當前 Y 軸位于 X 軸并且每個條形上方使用當前 X 軸，就像第一張照片一樣？問候
更新
正如下面的評論我目前使用
現在，我需要在每個條形上方放置 Y 軸文本，這可能嗎？
uj5u.com熱心網友回復：
看來你還在用Chart.js version 2。當前最新版本是3.5.1.
更改type: 'bar'為type: 'horizontalBar'它應該可以作業。
new Chart(this.ctx1, {
type: 'horizontalBar',
...
欲知詳情，請咨詢水平條形圖從
Chart.js v2.9.4檔案。
uj5u.com熱心網友回復：
添加這個：
options: {
indexAxis: 'y',
...
}
這是 ChartJS 檔案
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/323674.html