Chart.js：帶有常規條形圖的反向條形圖（從下到上，而不是從上到下）

Question

我正在嘗試為用戶的成績創建條形圖。 一年級非常好，六年級很差。 我希望1年級的酒吧非常高，而6年級的酒吧非常小。 如果我使用反向選項 ，則不是這種情況。 基本上，我希望y軸反轉，並且條形從底部而不是頂部上升。

小提琴

var canvas = document.getElementById('myChart');
var data = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [
        {
            label: "Grade",
            backgroundColor: "rgba(255,99,132,0.2)",
            borderColor: "rgba(255,99,132,1)",
            borderWidth: 2,
            hoverBackgroundColor: "rgba(255,99,132,0.4)",
            hoverBorderColor: "rgba(255,99,132,1)",
            data: [1, 4, 6, 2, 3, 5, 6],
        }
    ]
};
var option = {
    scales: {
    yAxes:[{
            stacked:true,
        gridLines: {
            display:true,
          color:"rgba(255,99,132,0.2)"
        },
        ticks: {
           suggestedMin: 1,
           suggestedMax: 6,
           reverse: true
        }
    }],
    xAxes:[{
            gridLines: {
            display:false
        }
    }]
  }
};

var myBarChart = Chart.Bar(canvas,{
    data:data,
  options:option
});

我期望的結果的草圖：

一種選擇是將圖表區域着色為所需的顏色，然后將條形顏色更改為透明，並將其寬度更改為100％。 這至少會使條形稍微正確。

---

給未來的人們的注意事項：除了@halliballi接受的答案之外，我還添加了以下代碼以覆蓋選項部分中的工具提示：

tooltips: {
        mode: 'index',
        intersect: false,
        callbacks: {
            title: function (tooltipItem, data)
            {
                return data['labels'][tooltipItem[0]['index']];
            },
            label: function (tooltipItem, data)
            {
                console.log(tooltipItem);
                return "Note: " +
                    (
                        7 - data['datasets'][0]['data'][tooltipItem['index']]
                    );
            }
        }
  },

這是我完成的圖：

Answer 1

我認為您可以將要顯示的值減去6減去“值”，然后在y軸上覆蓋標簽

options: {
        scales: {
            yAxes: [{
                ticks: {
                    callback: function(value, index, values) {
                        return (6 - value);
                    }
                }
            }]
        }