javascript - Chartjs v2.5 - 仅显示刻度上的最小值和最大值，刻度上的绝对定位

Question

我创建了一个非常简单的折线图，用于移动设备。我发现当我添加比例时，它会占用图表一侧的大量空间。

相反，我在其他移动图表上看到的结果仅显示最小值和最大值。用户可以使用工具提示来查找具体信息。

无论如何，我希望有人能向我展示如何创建一个像这里这样的秤:

此规模的两个主要要点:

1. 仅显示最小值和最大值
2. 它们以绝对定位方式显示在大约左上角和右下角。

---

我的思考过程可能是使用scaleOverride，然后定义scaleSteps : 1，其中scaleStepWidth等于最小值和最小值之间的差值。我的数据的最大值。即使这是在正确的轨道上，我也不知道如何将比例的定位覆盖为绝对位置，并且不占用线条本身的空间。

Answer 1

我已将此答案分解为使您的图表看起来像提供的图像所需的步骤:

1。仅显示最大和最小标签

首先，使用JavaScript max()和 min()确定数据数组中最高值和最低值的方法:

var min = Math.min(...data);
var max = Math.max(...data);

然后，将以下选项添加到 yAxes ticks configuration部分:

• 将 max 和 min 值设置为数据数组的最大值和最小值。
• 将 stepSize 设置为最大值和最小值之间的差值。这将确保它只显示标签中的最高和最低数字。

2。将标签移至图表右侧内部

这可以通过两个步骤完成:

• 添加 position: "right" 将刻度 yAxes 移动到图表右侧。
• 在刻度配置中设置 mirror: true 以翻转 yAxes 上的标签，使它们显示在图表内。

3。使用美元符号和 2 位小数格式化数字

要使用美元符号和两位小数来格式化数字，请将回调函数添加到刻度选项:

callback: function(value) {
    return '$' + value.toFixed(2);
}

参见How To Format Scale Numbers in Chart.js v2和 Formatting a number with exactly two decimals in JavaScript了解更多信息。

4。更改颜色或隐藏yAxes网格线

虽然您的问题是关于更改网格线的颜色，但根据提供的图像，我假设您想要删除 yAxes 线。要删除网格线，请将 grid line configuration 中的 drawBorder 设置为 false设置。

如果您确实想将网格线颜色更改为白色，color: "#fff" 即可，您只需确保将该线放入 gridLines 配置部分如下:

gridLines: {
    color: "#fff"
}

5。更改标签字体格式

这不是您的问题，但如果您想更改标签字体颜色和大小，只需使用 fontColor 和 fontSize 勾选配置选项即可。

最终yAxes代码:

yAxes: [{
    id: 'share_price',
    type: 'linear',
    position: "right",
    gridLines: {
        display: false,
        drawBorder: false,
        //color: "#fff"
    },
    ticks: {
        stepSize: max - min,
        min: min,
        max: max,
        mirror: true,
        fontColor: "#fff",
        fontSize: 18,
        callback: function(value) {
            return '$' + value.toFixed(2);
        }
    }
}]

JSFiddle 演示:https://jsfiddle.net/ujsg9w8r/5/