javascript - Chart.js:带有常规条形图的反向条形图(从下到上而不是从上到下)

Question

我正在尝试为用户的成绩创建条形图。 1级很好，6级很差。我希望 1 年级的阈值非常高，而 6 年级的阈值非常小。如果我使用 reverse option ， 不是这种情况。基本上，我希望 y 轴反转，并且条形图从底部而不是顶部上升。

Fiddle

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
});

我想要的结果的粗略草图:

一个选择是 colour the chart area在我想要的颜色中，然后将条形颜色更改为透明并将它们的宽度更改为 100%。这至少会使条形略微正确。

---

future 的人请注意:除了@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);
                    }
                }
            }]
        }