javascript - Chart.js 中的自定义字母数字值？

Question

我正在尝试使用 Chart.js 制作一个简单的水平条形图。 y 轴上有一些语言(“西类牙语”、“英语”……)及其 CEFR Level (从 A1 到 C2)在 x 轴上而不是某个数字级别(例如 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
                            }
                        }]
                    }
                }
            });

Answer 1

目前ChartJS不支持直接没有数值的两轴。但是您可以通过回调来完成此操作，如我的示例所示:

var ctx = document.getElementById('chart');

var xLabels = ["A","B","C","D","E","F","G","H","I","J","K"]; //Put here your x labels

var spokenLangChart = new Chart(ctx, {
                type: 'horizontalBar',
                data: {
                    labels: ['Spanish', 'English', 'German'], //Put here your x labels
                    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: {
                                //Returns the x labels
                                callback: function(value, index, values) {
                                    return xLabels[index];
                                }
                            },
                        }]
                    },
                },
                
            });

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<canvas id="chart" width="200" height="100"></canvas>

或者查看JSFiddle .

希望对你有帮助。