Chart.js 更改Chartjs中的Y轴单位_Chart.js

Chart.js 更改Chartjs中的Y轴单位

chart.js

Chart.js 更改Chartjs中的Y轴单位,chart.js,Chart.js,我觉得这是一个文档不足的特性，但我承认我很有可能正在下载它我有一个charjs对象： <body> <div id="container" style="width: 75%;"> <canvas id="canvas"></canvas> </div> <script> weekdays=["Monday", "Tuesday", "Wednesday", "Thurday

我觉得这是一个文档不足的特性，但我承认我很有可能正在下载它

我有一个charjs对象：

<body>
    <div id="container" style="width: 75%;">
        <canvas id="canvas"></canvas>
    </div>
    <script>
    weekdays=["Monday", "Tuesday", "Wednesday", "Thurday", "Friday", "Saturday", "Sunday", "Monday"]
    var d=new Date()
        var MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];

        var randomScalingFactor = function() {
            return (Math.random() > 0.5 ? 1.0 : 0) * Math.round(Math.random() * 100);
        };

        var barChartData = {
           labels: [weekdays[d.getDay()], weekdays[d.getDay()-6], weekdays[d.getDay()-5], weekdays[d.getDay()-4], weekdays[d.getDay()-3], weekdays[d.getDay()-2],weekdays[d.getDay()-1]    ],
            datasets: [{
                label: 'Logged Time',
                backgroundColor: "rgba(220,220,220,0.5)",
                data: sessions
            }
            ]

        };

        window.onload = function() {
            var ctx = document.getElementById("canvas").getContext("2d");
            window.myBar = new Chart(ctx, {
                type: 'bar',
                data: barChartData,
                options: {
                    // Elements options apply to all of the options unless overridden in a dataset
                    // In this case, we are setting the border of each bar to be 2px wide and green
                    elements: {
                        rectangle: {
                            borderWidth: 2,
                            borderColor: 'rgb(0, 255, 0)',
                            borderSkipped: 'bottom'
                        }
                    },
                    responsive: true,
                    title: {
                        display: true,
                        text: 'Vision Logged Hours'
                    }
                }
            });

        };




    </script>


工作日=[“周一”、“周二”、“周三”、“周四”、“周五”、“周六”、“周日”、“周一”]
var d=新日期（）
风险值月份=[“一月”、“二月”、“三月”、“四月”、“五月”、“六月”、“七月”、“八月”、“九月”、“十月”、“十一月”、“十二月”]；
var randomScalingFactor=函数（）{
返回值（Math.random（）>0.5？1.0:0）*Math.round（Math.random（）*100）；
};
var barChartData={
标签：[工作日[d.getDay（）]、工作日[d.getDay（）-6]、工作日[d.getDay（）-5]、工作日[d.getDay（）-4]、工作日[d.getDay（）-3]、工作日[d.getDay（）-2]、工作日[d.getDay（）-1]，
数据集：[{
标签：“记录的时间”，
背景色：“rgba（2200,0.5）”，
数据：会议
}
]
};
window.onload=函数（）{
var ctx=document.getElementById（“画布”）.getContext（“2d”）；
window.myBar=新图表（ctx{
类型：'bar'，
数据：barChartData，
选项：{
//元素选项应用于所有选项，除非在数据集中被重写
//在本例中，我们将每个条的边框设置为2px宽和绿色
要素：{
矩形：{
边界宽度：2，
边框颜色：“rgb（0，255，0）”，
跳过边界：“底部”
}
},
回答：是的，
标题：{
显示：对，
文字：“视觉记录小时”
}
}
});
};

看起来是这样的：

我的问题是y轴以分钟为单位，而我希望它以小时为单位。我对功能集有点迷茫-这可能吗

具有简单的手工制作功能：

function minutesToHours(minutes) {
    var hour = Math.floor(minutes / 60);
    minutes = minutes % 60;
    return ((hour < 10) ? "0"+hour : hour) + ":" + ((minutes < 10) ? "0"+minutes : minutes);
}

您可以看到一个工作示例，其结果如下：

根据官方文件，只需使用回调函数即可

var图表=新图表（ctx{
键入：“行”，
数据：数据，
选项：{
比例：{
雅克斯：[{
滴答声：{
//在刻度中包括一个美元符号
回调：函数（值、索引、值）{
返回“$”+值；
}
}
}]
}
}
});我发现，只需将“$”符号与值交换即可在值后面添加“$”符号，如{return value+'$'；}。我实际上用这个来表示百分号（%）。
options: {
    scales: {
        yAxes: [{
            ticks: {
                userCallback: function(item) {
                    return minutesToHours(item);
                },
            }
        }]
    }
}