Chart.js：带有常规条形的反向条形图（从下到上而不是从上到下）

Question

我正在尝试为用户的成绩创建条形图。 1级很好，6级很差。我希望 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

我想你可以 "invert" 你的值减去你想要显示的值的 6，然后覆盖 y-axis

处的标签

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

Chart.js：带有常规条形的反向条形图（从下到上而不是从上到下）

Chart.js: Reverse bar chart with regular bars (Bottom to top instead of top to bottom)

javascript

chart.js

chart.js2