Question

我正在尝试为用户的成绩创建一个条形图。 1年级非常好，6年级非常差。我希望1年级的酒吧非常高，6级的酒吧非常小。如果我使用reverse option，情况并非如此。基本上，我希望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
});

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

一种选择是以我想要的颜色colour the chart area，然后将条形颜色更改为透明，将宽度更改为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);
                    }
                }
            }]
        }

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

1 个答案: