如何在Chart.js中将Y轴值从数字改为字符串？

nle07wnf 于 2022-11-06 发布在 Chart.js

关注(0)|答案(2)|浏览(164)

我正在使用Chart.js，并试图改变y轴（见下面的屏幕截图）。我试图用一个字符串数组填充yLabels属性。但没有成功。任何帮助都将不胜感激！

jQuery(document).ready(function($) {
    'use strict ';
    var ctx = document.getElementById("myChart");
    var myChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: ["HTML", "CSS", "SCSS", "JavaScript"],
            yLabels: [
                'newb',
                'codecademy',
                'code-school',
                'bootcamp',
                'junior-dev',
                'mid-level',
                'senior-dev',
                'full-stack-dev',
                'famous-speaker',
                'unicorn'
            ],
            datasets: [{
                data: [12, 19, 3, 10],
                backgroundColor: [
                    'rgba(255, 159, 64, 0.2)',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(255, 206, 86, 0.2)',
                    'rgba(255, 206, 86, 0.2)'

                ],
                borderColor: [
                    'rgba(255,99,132,1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)',
                    'rgba(75, 192, 192, 1)'

                ],
                borderWidth: 1
            }]
        },
        options: {
            legend: {
                display: false
            },
            // scales: {
            //     yAxes: [{
            //         ticks: {
            //             beginAtZero: true
            //         }
            //     }]
            // },
            title: {
                display: true,
                text: 'Shameless Bar Graph to show proficency in skills'
            }
        }
    });
});

chart.js

来源：https://stackoverflow.com/questions/39167081/how-to-change-the-y-axis-values-from-numbers-to-strings-in-chart-js

2条答案

按热度按时间

bbmckpt71#

对于2.x版本，yAxes标签实际上存储在图表的options中，而不是像您所做的那样存储在它的data中。
如果您查看一下文档，您会发现必须编辑options.scales.yAxes中刻度的callback属性。
为了实现您的目的，我在代码中添加了一个JS对象：

// Replace the value with what you actually want for a specific key
var yLabels = {
    0 : 'newb', 2 : 'codecademy', 4 : 'code-school', 6 : 'bootcamp', 8 : 'junior-dev',
    10 : 'mid-level', 12 : 'senior-dev', 14 : 'full-stack-dev', 16 : 'famous-speaker',
    18 : 'unicorn', 20 : 'harambe'
}

然后在callback中：

options: {
    scales: {
        yAxes: [{
            ticks: {
                callback: function(value, index, values) {
                    // for a value (tick) equals to 8
                    return yLabels[value];
                    // 'junior-dev' will be returned instead and displayed on your chart
                }
            }
        }]
    }
}

请查看this jsFiddle的结果。

赞(0）回复(0）举报 2022-11-06

ego6inou2#

3.9.1版的更新（请参阅https：//www.chartjs.org/docs/latest/axes/labelling.html#creating-custom-tick-formats）。它非常类似，但您需要变更语法以取得：

options: {
        scales: {
            y: {
                ticks: {
                    // Include a dollar sign in the ticks
                    callback: function(value, index, ticks) {
                        return '$' + value;
                    }
                }
            }
        }
    }

赞(0）回复(0）举报 2022-11-06

我来回答

如何在Chart.js中将Y轴值从数字改为字符串？

2条答案

相关问题

热门标签

最新问答