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

橡皮泥

我正在尝试为我的用户的成绩创建条形图。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']]
                    );
            }
        }
  },

这是我完成的图表：

哈利巴利

我认为您可以使用 6 个负值“反转”您要显示的值的值，然后覆盖 y 轴上的标签

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。