Вот живая демонстрация. То, что я пытаюсь достичь, заключается в том, что пользователь может вручную использовать ручку ползунка для изменения значений, отображаемых в диаграмме высоких диаграмм, или они могут нажать кнопку воспроизведения, и он автоматически увеличит значение ползунка и внесут изменения в диаграмму. Пока я выполняю действие слайдера. Однако, когда у меня есть автоматический слайд, он увеличивает значение ползунка/позицию, но не запускает функцию slider.slide, которая вносит изменения в диаграмму. Наверное, что-то действительно простое, но я не могу его найти.
Код для слайдера:
$(function () {
$("#slider").slider({
value: 0,
range: "month",
min: 0,
max: data1.length - 1,
animate: true,
slide: function (event, ui) {
chartIncrement(this, ui.value);
}
});
});
Код для автоматического увеличения:
function scrollSlider() {
var slideValue;
slideValue = $("#slider").slider("value");
if (slideValue >= 0) {
if (slideValue == data1.length - 1) {
slideValue = -1;
}
$("#slider").slider("value", slideValue + 1);
console.log($("#slider").slider("value"));
setTimeout(scrollSlider, 1000);
}
}
$('#startSlider').click(function () {
scrollSlider();
});
И вот код, который влияет на изменение диаграммы:
function updateChart(chart, value) {
chart.series[0].setData([data1[value]]);
}
function chartIncrement(identifier, value) {
$("#slider-val").text(Highcharts.dateFormat('%b %Y', data1[value][0]));
updateChart(chart, value);
}
Как я могу использовать метод автоинкремента, также запускаю функцию слайда? Я думал, что если вы измените значение независимо от метода, он "сделает" работу.
Согласно документам, используйте обратный вызов change
а не обратный вызов slide
(жирный мой):
slide (event, ui) Тип: слайд
Сдвиг на каждом перемещении мыши во время слайда. Значение, указанное в событии, так как ui.value представляет значение, которое будет иметь дескриптор в результате текущего движения. Отмена события предотвратит перемещение дескриптора, и дескриптор продолжит иметь прежнее значение.
change (event, ui) Тип: slidechange
Запускается после того, как пользователь сдвигает дескриптор, если значение изменилось; или если значение изменяется программно с помощью метода значений.
Обновлена скрипка.
chartIncrement($("#slider")[0], slideValue + 1);
jsfiddle.net/bdNnm/8