图表JS Y轴标注答案

【问题标题】：Chart JS Y-axis labeling图表JS Y轴标注
【发布时间】：2019-06-21 02:59:36
【问题描述】：

我一直在使用 chartjs 制作图表，显示每天的锻炼持续时间。所以 x 轴有日期，y 轴有持续时间，数据集的值最大持续时间为 1.30，最小值为 0.00。我想要y 轴显示 0.00,0.10,0.20...,1.20,1.30 等标签。

我可以将带有标签的图表显示为 .1,.2 ... 1.3。代码如下。

我可以将带有标签的图表显示为 .1,.2 ..1.3。代码如下。

              var options = {
                type: 'line',
                data: {
                    labels: newDates.split(','),datasets: [{
                        label: 'Time',
                        data: newDuration.split(','),
                        borderWidth: 1,
                        fill: false,
                        borderColor: "#fff"
                    }]
                },
                options: {
                    responsive: true,
              maintainAspectRatio: false,
                        title: {
                            display: true,
                        },
                  legend: {
                        display: false
                    },
                    scales: {
                        yAxes: [{
                    ticks: {
                      beginAtZero: true,
                      suggestedMax: 1.30,
                      stepSize: .10,
                      fontColor: 'rgba(255, 255, 255)' // makes grid lines from y axis red
                   },
                            gridLines: {
                            color: 'rgba(255, 255, 255, 0.2)' // makes grid lines from y axis red
                            }
                        }],
                        xAxes: [{
                  ticks: {
                    beginAtZero: true,
                     fontColor: 'rgba(255, 255, 255)' // makes grid lines from y axis red

                 },
                            gridLines: {
                                display:false
                            }
                        }]
                    }
                }
            }

            var ctx = document.getElementById('chartJSContainer').getContext('2d');
            new Chart(ctx, options);

预期结果：

y 轴显示标签为 0 0.10 0.20 0.30 ... 1.20,1.30

【问题讨论】：

谷歌驱动链接无效。您可以在 StackOverflow 问题部分上传图片。
@ShafikurRahman 是的，我刚刚做了
@ShafikurRahman 非常高兴您的尝试。我刚刚找到了一个使用回调函数的解决方案。
添加回答。这将有助于其他开发人员

标签： javascript php jquery laravel-5 chart.js

【解决方案1】：

scales: {
    yAxes: [{
        ticks: {
            callback: function (tickValue, index, ticks) {
                return Number(tickValue)
                    .toFixed(2);
            }
        }
    }]
}

这个回调函数就是解决办法。

【讨论】：

【解决方案2】：

改变这个

yAxes: [{
    ticks: {
       precision: 2
    }
}],

【讨论】：