不幸的是，Chart.js 2.8.0似乎只支持 yAxes 的刻度對(duì)象的反向布爾參數(shù)。
這意味著，如果沒(méi)有黑客攻擊或猴子補(bǔ)丁，它就無(wú)法在 Chart.js API 中完成。
此外，我想出的這個(gè)骯臟的解決方案似乎是過(guò)度設(shè)計(jì)的，因?yàn)楹?jiǎn)單地通過(guò)索引引用它來(lái)更改 dataset.data 數(shù)組項(xiàng)不會(huì)正確觸發(fā) Chart.js 動(dòng)畫(huà)，因此需要使用拼接。
解釋?zhuān)?/p>
其實(shí)這個(gè)想法很簡(jiǎn)單：
為了從右到左顯示先驗(yàn)已知數(shù)量的條形
，首先需要?jiǎng)?chuàng)建一個(gè)長(zhǎng)度等于條形數(shù)的數(shù)組，并用空值填充它。
換句話(huà)說(shuō)，一個(gè)包含與要顯示的條數(shù)一樣多的空值的數(shù)組。
然后每個(gè)新值都必須從右邊（數(shù)組的末尾）插入（使用拼接）在數(shù)組項(xiàng)為空的第一個(gè)索引處，或者只是在正確的索引處，從 array.length - 1 倒數(shù)到 0。
“可視化”：
let value = 1;
const graphData = Array(3).fill(null);
console.log(graphData)
for(let i = graphData.length - 1; i >= 0; --i){
graphData.splice(i, 1, value++);
console.log(graphData)
}
例子：
class GraphController {
size = 0;
data = [];
labels = [];
graphData = [];
ctx = null;
chart = null;
constructor(size, data, labels, canvasId) {
this.size = size;
this.data = data;
this.labels = labels;
this.ctx = document.getElementById(canvasId).getContext('2d');
this.graphData = Array(size).fill(null);
}
fetchAndDraw(index = 1) {
const item = this.data[index - 1];
if (item.TotalReward) {
this.graphData[this.size - index] = item.TotalReward;
}
if (index > 1 && index < this.size) {
this.chart.data.datasets[0].data.splice(this.size - index, 1, item.TotalReward);
this.chart.update();
} else {
if (this.chart) {
this.chart.destroy();
}
this.chart = new Chart(this.ctx, {
type: 'bar',
data: {
labels: this.labels,
datasets: [{
data: [...this.graphData],
backgroundColor: '#fff',
hoverBackgroundColor: '#d5d5d5',
borderWidth: 0
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
legend: {
display: false,
},
title: {
display: false,
},
tooltips: {
enabled: false,
},
scales: {
xAxes: [{
barPercentage: 1.0,
categoryPercentage: 0.55,
gridLines: {
display: false,
color: '#fff',
drawBorder: false,
zeroLineColor: '#fff'
},
ticks: {
fontFamily: '"Avenir Next", "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
fontSize: 16,
fontColor: '#fff',
padding: 15,
}
}],
yAxes: [{
categoryPercentage: 0.8,
barPercentage: 0.8,
gridLines: {
display: false,
color: '#fff',
drawBorder: false,
zeroLineColor: '#fff'
},
ticks: {
min: 0,
stepSize: 10,
fontFamily: '"Avenir Next", "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
fontSize: 16,
fontColor: '#fff',
padding: 10,
callback: function (value) {
return '$' + value;
}
}
}],
},
},
});
}
index++;
if (index <= this.size) {
setTimeout(() => {
this.fetchAndDraw(index);
}, 1000);
}
}
}
const data = [
{ "Month": "April ‘18", "TotalReward": 10.37 },
{ "Month": "May ‘18", "TotalReward": 18.11 },
{ "Month": "June ‘18", "TotalReward": 25.49 },
{ "Month": "January", "TotalReward": 35.55 },
{ "Month": "February", "TotalReward": 50.25 },
{ "Month": "March", "TotalReward": 59.15 },
]
const rewardLabels = ["April ‘18", "May ‘18", "June ‘18", "January", "February", "March"].reverse();
const graph = new GraphController(6, data, rewardLabels, 'rewardChart');
graph.fetchAndDraw();
.chart-wrap {
background: #333;
padding: 20px 10px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="chart-wrap">
<canvas id="rewardChart" width="600" height="165"></canvas>
</div>
