ChartJS x轴标签显示全部

Question

    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.0.0/chartjs-plugin-datalabels.min.js"></script>
    <div style="width:50%">
    <canvas id="chart2" style="width:100%"></canvas>
    </div>
    <script>
    var yLabels = {
        1 : 'New',
      2 : 'Learning Phase',
      3 : 'Good',
      4 : 'Strong',
      5 : 'Master'
    }
    
    Chart.register(ChartDataLabels);
    new Chart('chart2', {
      type: 'bar',
      data: {
        labels: ['Tommy','Fred'],
        datasets: [{
          data: [3,1],
        }]
      },
      options: {
    
        indexAxis: 'y',
        layout: {
          padding: {
            right: 60
          }
        },
        plugins: {
          title: {
            display: true,
            text: "Skill Chart"
          },
          legend: {
            display: false,
          },
          datalabels: {
            color: 'blue',
                formatter: (value) => {
                if (value == 1) {
                    value = 'New';
                    return value;
                }
                if (value == 2) {
                    value = 'Learning Phase';
                    return value;
                }
    
                if (value == 3) {
                    value = 'Good';
                    return value;
                }
                if (value == 4) {
                    value = 'Strong';
                    return value;
                }
                if (value == 5) {
                    value = 'Master';
                    return value;
                }
                },
            anchor: 'end',
            align: 'right',
            labels: {
              title: {
                font: {
                  weight: 'bold'
                }
              }
            }
          }
        },
        scales: {
          y: {
            grid: {
              display: false
            },
                  ticks: {
            },
          },
          x: {
          ticks:{
            callback: function(value, index, values) {
                  return yLabels[value];
              },
          precision: 1,
          },
            grid: {
              display: false,
            }
          }
        }
      }
    });
    </script>

以下是一份可用的代码，但我现在面临的问题是如何在x轴上显示所有在变量ylabels中的标签？我尝试了 autoSkip:false，但这并没有起作用。

我的期望是无论数据是3和1还是其他任何数值，都能显示从“new”到“master”的所有标签。如果我将标签更改为“5”，一切就完美了。 https://codepen.io/kennyl80841728/pen/jOxzLjy

- brandnewphpuser

Answer 1

您需要按以下方式定义options.scales.x.max：

options: {
  scales: {
    x: {
      max: 5,
      ...

如需更多信息，请查阅Chart.js文档中的“Min Max Configuration”部分。链接：https://www.chartjs.org/docs/latest/axes/cartesian/category.html#min-max-configuration

- uminder