Question

我正在尝试使用Chart.js创建一个简单的水平条形图，其中包含y轴上的某些语言（'西班牙语'，'英语'，...）及其CEFR Level（来自A1）在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。

我希望它可以帮到你。

Answer 2

感谢Julian Schmuckli，我能够解决这个问题。由于它没有完全解决，我将发布我自己的答案，以便我可以分享结果。

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非常重要，否则它会将您的最低值设为零，而我没有数值，因此发现错误有点困难。

这是最终结果：

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

2 个答案: