HighCharts Y-Axis устанавливает min max с полем ввода на оси визуализированного графика

Question

Я хотел бы дать пользователям с HighCharts.chart возможность устанавливать минимальное и максимальное значение для оси Y. Это должно быть удобно для пользователей. Я подумал, что умным решением может быть добавление поля min и max к оси y. Я открыт для лучших решений, если они есть?

Я знаю, что могу установить min и max в качестве начальной конфигурации с yAxis.min и yAxis.max , но могу не найти никакой конфигурации или плагина для разрешения этого пользователю. Я также не смог найти простой способ расширить ось Y или заменить метки min и max полем формы.

Как я могу расширить минимальные и максимальные метки оси Y с полем ввода, чтобы изменить минимальное и максимальное значение для соответствующего сюжета?

Идея интерфейса:

Ось Y с полями ввода для мин. и макс.

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