我可以制作带有两个类别轴的水平条形图吗？

Question

我是 chart.js 的新手，我正在尝试设置一个水平条形图，在 x 和 y 轴上都有类别。我已经让轴正确显示，但没有显示任何数据。

我尝试切换到折线图，同时试图找出我出错的地方，并且数据在折线图上显示得很好。我可以不使用带有水平条形图的两个类别轴吗？还是我做错了什么？

这是我必须设置图表的内容：

var config = {

    type: 'horizontalBar',

    data: {

    yLabels: ["Individual Thinking", "Individual Feeling", "Individual Doing",

    "Partner Thinking", "Partner Feeling", "Partner Doing",

    "Team Thinking", "Team Feeling", "Team Doing",

    "Cultural Thinking", "Cultural Feeling", "Cultural Doing"],

    xLabels: ["","No Complexity","","Below Average","","","Average","Above Average","Highly Focused", "", "", "", "", "Extraordinarily Focused"],

    datasets: [{

        data: ["No Complexity","No Complexity","No Complexity","No Complexity",

        "No Complexity","No Complexity","No Complexity","No Complexity",

        "No Complexity","No Complexity","No Complexity","No Complexity"]

        }]

    },

    options: {

        responsive: true,

        title: {

            display: false,

        },

        scales: {

            xAxes: [{

                type: 'category',

                display: true,

                scaleLabel: {

                    display: true,

                    labelString: 'Complexity'

                }

            }],

            yAxes: [{

                type: 'category',

                position: 'left',

                display: true,

                scaleLabel: {

                    display: false

                }

            }]

        }

    }

};

这里的结果是什么样子。

Answer 1

是的。你可以。我修改了您的代码以获得如下所示的输出。这是带有 demo的完整代码。您必须在比例尺中添加一个配置回调来更新 x 轴的参数。这是代码。*注意：请同时关注min,max和step size。//Labels for your x-axisvar xLabels = {&nbsp; 20: 'No Complexity',&nbsp; 40: 'Below Average',&nbsp; 60: 'Average',&nbsp; 80: 'Above Average',&nbsp; 100: 'Highly Focused',&nbsp; 120: 'Extraordinarily Focused'}var ctx = document.getElementById('myChart').getContext('2d');var chart = new Chart(ctx, {&nbsp; // The type of chart you want to create&nbsp; type: 'horizontalBar',&nbsp; // The data for your dataset&nbsp; data: {&nbsp; &nbsp; labels: ["Individual Thinking", "Individual Feeling", "Individual Doing",&nbsp; &nbsp; &nbsp; "Partner Thinking", "Partner Feeling", "Partner Doing",&nbsp; &nbsp; &nbsp; "Team Thinking", "Team Feeling", "Team Doing",&nbsp; &nbsp; &nbsp; "Cultural Thinking", "Cultural Feeling", "Cultural Doing"&nbsp; &nbsp; ],&nbsp; &nbsp; datasets: [{&nbsp; &nbsp; &nbsp; label: 'Dataset',&nbsp; &nbsp; &nbsp; backgroundColor: 'rgb(255, 99, 132)',&nbsp; &nbsp; &nbsp; borderColor: 'rgb(255, 99, 132)',&nbsp; &nbsp; &nbsp; data: [27, 25, 50, 45, 110, 62, 30, 100, 56, 28, 87, 30, 71, 23]&nbsp; &nbsp; }]&nbsp; },&nbsp; // Configuration options go here&nbsp; options: {&nbsp; &nbsp; scales: {&nbsp; &nbsp; &nbsp; xAxes: [{&nbsp; &nbsp; &nbsp; &nbsp; ticks: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; callback: function(value, index, values) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return xLabels[value];&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; beginAtZero: true,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; min: 20, //The minimum value in the data range&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; max: 120, //The maximum value in the data range&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; stepSize: 20, //The gap between each x-axis index&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; }]&nbsp; &nbsp; }&nbsp; }});<canvas id="myChart"></canvas>