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

Javascript 如何在Chart.js中将Y轴值从数字更改为字符串?,javascript,chart.js,Javascript,Chart.js,我正在使用并试图更改y轴(请参见下面的屏幕截图)。我尝试用字符串数组填充yLabels属性。但那没用。任何帮助都将不胜感激 yax标签实际上存储在图表的选项中,而不是像您所做的那样存储在其数据中 如果查看(向上滚动一点),您将看到必须编辑options.scales.yAxes中刻度的回调属性。 为了满足您的需要,我在您的代码中添加了一个JS对象: //将该值替换为您实际需要的特定键的值 var yLabels={ 0:'新手',2:'编解码器',4:'代码学校',6:'训练营',8:'初级

我正在使用并试图更改y轴(请参见下面的屏幕截图)。我尝试用字符串数组填充
yLabels
属性。但那没用。任何帮助都将不胜感激


yax
标签实际上存储在图表的
选项中,而不是像您所做的那样存储在其
数据中

如果查看(向上滚动一点),您将看到必须编辑
options.scales.yAxes
中刻度的
回调
属性。
为了满足您的需要,我在您的代码中添加了一个JS对象:

//将该值替换为您实际需要的特定键的值
var yLabels={
0:'新手',2:'编解码器',4:'代码学校',6:'训练营',8:'初级开发',
10:'中级',12:'高级开发',14:'全套开发',16:'著名演讲者',
18:“独角兽”,20:“哈拉姆”
}
然后在
回调中

选项:{
比例:{
雅克斯:[{
滴答声:{
回调:函数(值、索引、值){
//如果值(勾号)等于8
返回标签[值];
//“junior dev”将返回并显示在图表上
}
}
}]
}
}

查看结果。

感谢tektiv的成功!因此,我注意到您的注释-//“junior dev”将返回并显示在您的图表上。您是正确的,当我尝试使用或利用
yLabels
对象中的特定数据时,我无法获得完整范围,即从newb到harambe。我正在查看文档以改变我想要的方式;e、 例如,我可以制作
HTML,CSS=10,JS&SCSS=8
,但是在文档中你可以在哪里学习呢?@antoniortiz很高兴我帮了你,但我没有得到你想要的,现在:/--(据我所知)你想把你的图表分成10部分吗,把那些部件从
newb
调用到
harambe
?对不起,让我解释一下。当我尝试在这里输入数字(数据:[10,10,8,8])以匹配对象中的键时,我会得到一些古怪的行为。基本上,我希望HTML和CSS设置为10,JS和SCSS设置为8。这种行为似乎与您在评论中的陈述相符。这有意义吗?你说的古怪行为是什么意思?当我用
[10,10,8,8]
替换您的数据时,我得到了,这对我来说很好。。否则我还是不明白你想告诉我什么,我为此道歉,我工作了一整天,其实是我的错。如果没有建立连接,它将忽略上面的键,因为它们不需要。我理解漫长的一天,我有了一个新生儿!谢谢你,祝你一切顺利!
 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'
            }
        }
    });
});