时间戳

首页 > 解决方案 > HighCharts y 轴设置最小值最大值与渲染图轴上的输入字段

javascript - HighCharts y 轴设置最小值最大值与渲染图轴上的输入字段

问题描述

我想给 HighCharts.chart 的用户设置 y 轴的最小值和最大值的选项。这应该是用户体验友好的。我认为一个聪明的解决方案可能是在 y 轴上添加一个最小值和最大值字段。我愿意寻求更好的解决方案，如果有的话？

我知道我可以使用yAxis.min 和 yAxis.max将 min 和 max 设置为初始配置，但是找不到任何允许用户这样做的配置或插件。我也找不到一种简单的方法来扩展 y 轴或用表单字段替换最小和最大标签。

如何使用输入字段扩展 y 轴标签 min 和 max 以更改相应图的 min 和 max？

用户界面理念：

带有最小值和最大值输入字段的 y 轴

标签： javascripthighcharts

解决方案

我认为下面的演示可能是实现您的要求的良好开端。

演示：https ://jsfiddle.net/BlackLabel/3y9au2h4/

var minInput = document.getElementById('minInput'),
        maxInput = document.getElementById('maxInput');

minInput.onchange = function() {
    chart.yAxis[0].update({
        min: this.value
    })
}

maxInput.onchange = function() {
    chart.yAxis[0].update({
        max: this.value
    })
}

API：https ://api.highcharts.com/class-reference/Highcharts.Axis#update

编辑

上面的标签可以呈现为独立的 HTML 元素，并使用formatter回调进行自定义。

演示：https ://jsfiddle.net/BlackLabel/e60xj9go/

API：https ://api.highcharts.com/highcharts/yAxis.labels.useHTML

API：https ://api.highcharts.com/highcharts/yAxis.labels.formatter

推荐阅读