时间戳

首页 > 解决方案 > ChartJs - 标记 Y 轴的最小值和最大值

javascript - ChartJs - 标记 Y 轴的最小值和最大值

问题描述

我找到了一个代码来为 Y 轴上的每个值添加一个标签，我已经尝试过了。这是代码

var chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    // Include a dollar sign in the ticks
                    callback: function(value, index, values) {
                        return '$' + value;
                    }
                }
            }]
        }
    }
});

但是，我可以只给出最小值和最大值吗？如果是这样，怎么做？

以下是我的意思的示例图表。最小和最大标签我用红色标记。

我的意思是示例图表

我的意思是示例图表

标签： javascriptphpchartschart.js

解决方案

您可以直接指定最小值和最大值，请查看https://www.chartjs.org/docs/latest/axes/cartesian/linear.html#step-size

例如

var chart = new Chart(ctx, {
type: 'line',
data: data,
options: {
    scales: {
        yAxes: [{
            ticks: {
                // Include a dollar sign in the ticks
                callback: function(value, index, values) {
                    return '$' + value;
                },
             min: 1,
             max: 100
            }
        }]
    }
}});

您还可以使用轴范围设置，它只是更改用于缩放轴的数据值，并且对于在保持自动拟合行为的同时扩展轴的范围很有用。 https://www.chartjs.org/docs/latest/axes/cartesian/linear.html#axis-range-settings

例如

var chart = new Chart(ctx, {
type: 'line',
data: data,
options: {
    scales: {
        yAxes: [{
            ticks: {
                // Include a dollar sign in the ticks
                callback: function(value, index, values) {
                    return '$' + value;
                },
             suggestedMin: 1,
             suggestedMax: 100
            }
        }]
    }
}});

推荐阅读