Chart.js 从右到左显示 x 轴数据

Question

我正在处理 chart.js 垂直图表，我想对它的显示方式做一些细微的改变。基本上第一个数据将从左侧显示，但我想从右侧显示第一个数据。那可能吗？这是我迄今为止的工作版本：https://jsfiddle.net/wxaL6en0/4/   options: {      responsive: true,      maintainAspectRatio: false,      legend: {        display: false,      }   }这就是我为该选项所做的。我期待的结果是，April在右边，第一个栏显示在右边。我不确定这是否可行，因为我没有在互联网上找到任何解决方案。但我希望有人以前试过这个。

Answer 1

不幸的是，Chart.js 2.8.0似乎只支持 yAxes 的刻度对象的反向布尔参数。

这意味着，如果没有黑客攻击或猴子补丁，它就无法在 Chart.js API 中完成。

此外，我想出的这个肮脏的解决方案似乎是过度设计的，因为简单地通过索引引用它来更改 dataset.data 数组项不会正确触发 Chart.js 动画，因此需要使用拼接。

解释：

其实这个想法很简单：

为了从右到左显示先验已知数量的条形

，首先需要创建一个长度等于条形数的数组，并用空值填充它。

换句话说，一个包含与要显示的条数一样多的空值的数组。

然后每个新值都必须从右边（数组的末尾）插入（使用拼接）在数组项为空的第一个索引处，或者只是在正确的索引处，从 array.length - 1 倒数到 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>