Javascript chart.js中的自定义字母数字值？

我试图制作一个简单的水平条形图，y轴上有一些语言（“西班牙语”、“英语”和…），x轴上有一些语言（从A1到C2），而不是一些数字级别（例如1-10）

有没有办法让条形图在x轴上没有纯数值

这就是我现在用这个代码得到的：

var spokenLangChart = new Chart(ctx, {
                type: 'horizontalBar',
                data: {
                    labels: ['Spanish', 'English', 'German'],
                    datasets: [{
                        label: 'CEF Level',
                        labels: ['A1', 'A2', 'B1', 'B2', 'C1', 'C2'],
                        data: ['C2', 'C1', 'B1'],
                        backgroundColor: "rgba(255,153,0,0.4)"
                    }]
                },
                options: {
                    scales: {
                        xAxes: [{
                            ticks: {
                                beginAtZero: true
                            }
                        }]
                    }
                }
            });

---

目前，ChartJS不直接支持没有数值的两个轴。但您可以通过回调来实现这一点，正如您在我的示例中看到的：

var ctx=document.getElementById（'chart'）；
变量xLabels=[“A”、“B”、“C”、“D”、“E”、“F”、“G”、“H”、“I”、“J”、“K”]//把你的x标签放在这里
var spokenLangChart=新图表（ctx{
键入：“水平线”，
数据：{
标签：[‘西班牙语’、‘英语’、‘德语’]，//把你的x标签放在这里
数据集：[{
标签：“CEF级别”，
标签：['A1'，'A2'，'B1'，'B2'，'C1'，'C2']，
数据：['C2'，'C1'，'B1']，
背景颜色：“rgba（255153,0,0.4）”
}]
},
选项：{
比例：{
xAxes：[{
滴答声：{
//返回x标签
回调：函数（值、索引、值）{
返回xLabels[索引]；
}
},
}]
},
},
});
多亏了朱利安·施穆克利，我才得以解决这个问题。由于这个问题还没有完全解决，我将发布我自己的答案，以便分享结果

var ctx = document.getElementById('spokenLangChart').getContext('2d');
            var xLabels = ['A1', 'A2', 'B1', 'B2', 'C1', 'C2'];
            var spokenLangChart = new Chart(ctx, {
                type: 'horizontalBar',
                data: {
                    labels: ['Spanish', 'English', 'German'], //Put here your x labels
                    datasets: [{
                        label: 'CEF Level',
                        data: [5, 4, 3],
                        backgroundColor: "rgba(255,153,0,0.4)"
                    }]
                },
                options: {
                    legend: {
                        position: 'bottom'
                    },
                    title: {
                        display: true,
                        text: 'Spoken Languages'
                    },
                    scales: {
                        xAxes: [{
                            ticks: {
                                beginAtZero: true,
                                //Returns the x labels
                                callback: function (value, index, values) {
                                    return xLabels[index];
                                }
                            }
                        }]
                    }
                }

            });

非常重要的一点是，你必须输入
beginAtZero:true
，否则它会将你的最低值设为零，因为我没有数值，所以要找出错误有点困难

以下是最终结果：

必须再调整一点，但它确实有帮助！将很快发布完整的解决方案，谢谢！