HighCharts y 軸設置最小值最大值與渲染圖形軸上的輸入字段

Question

我想為 HighCharts.chart 的用戶提供選項設置 y 軸的最小值和最大值。 這應該是用戶體驗友好的。 我認為一個聰明的解決方案可能是在 y 軸上添加一個最小值和最大值字段。 我願意尋求更好的解決方案，如果有的話？

我知道我可以使用yAxis.min 和 yAxis.max將 min 和 max 設置為初始配置，但是找不到任何允許用戶這樣做的配置或插件。 我也找不到一種簡單的方法來擴展 y 軸或用表單字段替換最小和最大 label。

如何使用輸入字段擴展 y 軸標簽 min 和 max 以更改相應 plot 的 min 和 max？

用戶界面理念：

Answer 1

我認為下面的演示可能是實現您的要求的良好開端。

演示： 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