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

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-axis

var xLabels = {

  20: 'No Complexity',

  40: 'Below Average',

  60: 'Average',

  80: 'Above Average',

  100: 'Highly Focused',

  120: 'Extraordinarily Focused'

}

var ctx = document.getElementById('myChart').getContext('2d');

var chart = new Chart(ctx, {

  // The type of chart you want to create

  type: 'horizontalBar',

  // The data for your dataset

  data: {

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

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

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

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

    ],

    datasets: [{

      label: 'Dataset',

      backgroundColor: 'rgb(255, 99, 132)',

      borderColor: 'rgb(255, 99, 132)',

      data: [27, 25, 50, 45, 110, 62, 30, 100, 56, 28, 87, 30, 71, 23]

    }]

  },

  // Configuration options go here

  options: {

    scales: {

      xAxes: [{

        ticks: {

          callback: function(value, index, values) {

            return xLabels[value];

          },

          beginAtZero: true,

          min: 20, //The minimum value in the data range

          max: 120, //The maximum value in the data range

          stepSize: 20, //The gap between each x-axis index

        }

      }]

    }

  }

});

<canvas id="myChart"></canvas>