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配置部分：

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

2.将标签移动到图表右侧内侧

这可以分两步完成：

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

3.带有美元符号和2位小数的格式编号

要使用美元符号和两个小数位来格式化数字，请在ticks选项中添加callback函数：

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

有关详细信息，请参阅Chart.js v2中的如何格式化比例数和在JavaScript中格式化具有两位小数的数字 。

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

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

如果你想将网格线颜色更改为白色， color: "#fff"将起作用，你只需要确保将该行放在gridLines配置部分中，如：

gridLines: {
    color: "#fff"
}

5.更改标签字体格式

这不在您的问题中，但如果您想更改标签字体颜色和大小调整，只需使用fontColor和fontSize tick配置选项。

最终的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/