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值设置为数据数组的最大值和最小值.
• 设置stepSize为最大值和最小值之间的差值.这将确保它仅显示标签中的最高和最低数字.

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

这可以分两步完成:

• 添加position: "right"以将比例移动yAxes到图表的右侧.
• 设置mirror: true在刻度线配置中以翻转标签yAxes,使其显示在图表内.

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

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

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勾选配置选项.

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