不幸的是，Chart.js 2.8.0似乎只支持yAxes的ticks对象的反向布尔参数。
这意味着，如果没有黑客攻击或猴子补丁，它不能在Chart.js API中完成。
另外，我提出的这个肮脏的解决方案似乎是过度设计的，因为简单地通过引用其索引来更改dataset.data数组项不会正确触发Chart.js动画，因此需要使用splice。

说明：

其实这个想法很简单：
为了从右到左显示先验已知数量的条形图，
首先需要创建一个长度等于条数的数组，并用空值填充它。
换句话说，一个数组包含的空值与要显示的条数一样多。
然后每个新值必须从右边（数组的末尾）插入（使用拼接）在数组项为空的第一个索引处，或者只是在正确的索引处，从数组开始倒数。

“可视化”：

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>

您可以使用反向选项来执行此操作：

let isRightToLeft = true;
chart.options = {
      scales: {
        x: {
          reverse: isRightToLeft ? true : false,
        }
      }
    };

字符串