Javascript Chartjs v2.5-仅在比例上显示最小值和最大值，在比例上显示绝对位置

我创建了一个非常简单的折线图，用于移动设备。我发现当我加入刻度时，它会在图表的侧面占据很多空间

相反，我在其他移动图表上看到的只是显示最小值和最大值。用户可以使用工具提示查找详细信息

无论如何，我希望有人能告诉我如何创建一个比例尺，比如这里的比例尺：

这一规模的两个主要收获：

仅显示最小值和最大值

它们以绝对位置显示，大致位于左上角和右下角

---

---

我的思考过程可能是使用

scaleOverride

，然后定义

scaleSteps:1

，其

scaleStepWidth

等于我数据的最小值和最大值之间的差值。即使这是在正确的轨道上，我也不知道如何将刻度的位置改写为绝对位置，而不占用直线本身的空间。

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

1.仅显示最大和最小标签 首先，使用JavaScript和方法确定数据数组中的最高值和最低值：

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

然后，将以下选项添加到

yAxes

部分：

• 将

  max

  和

  min

  值设置为数据数组的max和min值
• 将

  步长设置为最大值和最小值之间的差值。这将确保它只显示标签中的最高和最低数字

2.将标签移动到图表右侧的内部 这可以通过两个步骤完成：

• 添加

  position:“right”

  以将刻度

  yAxes

  移动到图表的右侧
• 在ticks配置中设置

  mirror:true

  ，将标签翻转到

  yAxes

  上，使其显示在图表中

3.使用美元符号和2位小数设置数字格式 要使用美元符号和两位小数设置数字格式，请将

回调

函数添加到勾号选项：

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

有关更多信息，请参阅和

4.更改颜色或隐藏

yAxes

网格线 尽管您的问题是关于更改网格线的颜色，但根据提供的图像，我假设您希望删除

yAxes

线。要删除网格线，请在设置中将

drawBorder

设置为

false

如果确实要将网格线颜色更改为白色，

color:“#fff”

将起作用，只需确保将该行放入

gridLines

配置部分，如：

gridLines: {
    color: "#fff"
}

5.更改标签字体格式 这不在您的问题中，但如果您想更改标签字体颜色和大小，只需使用

fontColor

和

fontSize

勾选配置选项即可

最终

yAxes

代码：

---

JSFIDLE演示：

您可以添加代码或JSFIDLE吗。。。这是我现在的图表。我把秤弄乱了，但运气不好，所以我把它留下了。谢谢！JS不是我的强项，所以我很感激。两个快速跟进：我注意到在你的小提琴中，数字的格式是

12.3

，没有任何多余的JS。我如何才能让它显示为

$12.30

。。。第二，你知道如何改变黑色yaxis线的颜色吗？设置

color:“#ffffff”

仅更改文本，而不更改行。@很幸运，我已更新了答案以包含后续问题。我还更新了JSFiddle link.Fantastic。非常感谢！从学习的角度来看，你的循序渐进是非常有价值的。干杯

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);
        }
    }
}]