Создание перетаскиваемого контейнера HighChart
Кто-нибудь успешно смог добавить возможность перетаскивания highcharts на HTML-страницу?
Я оцениваю HighCharts для использования в рабочем проекте.
Одним из требований будет возможность щелкнуть диаграмму и перетащить всю диаграмму в другое место (div) на странице.
HTML 5 имеет встроенные возможности перетаскивания, где вы просто устанавливаете для свойства draggable объекта значение «true» и устанавливаете несколько событий перетаскивания.
Мне не удалось реализовать это перетаскивание HTML5 на High Chart. Я попытался установить атрибут "draggable" тега DIV контейнера диаграммы в значение true и событие div "ondragstart", но событие начала перетаскивания никогда не запускалось.
Я предполагаю, что объект Highchart обрабатывает события onclick, поэтому событие начала перетаскивания не запускается.
Еще одно требование заключается в том, что пользователь по-прежнему сможет использовать функциональные возможности диаграммы по умолчанию, когда вы щелкаете серию или заголовок легенды. Например, мы позволим пользователю щелкнуть круговую диаграмму, чтобы открыть новое окно для «детализации» в серии, чтобы увидеть связанные данные. Таким образом, событие onclick элементов серии по-прежнему должно нормально функционировать. Я полагаю, что возможность перетаскивать всю диаграмму означало бы сначала щелкнуть в некотором «открытом» пространстве внутри контейнера.
Кто-нибудь успешно смог добавить возможность перетаскивания highcharts на HTML-страницу?
Спасибо
Кортни
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Это можно сделать, переопределив поведение функции Highcharts.Pointer.prototype.drag по умолчанию:
JS:
(function(H) {
H.Pointer.prototype.drag = function(e) {
var container = this.chart.container.parentElement;
container.style.left = container.offsetLeft + e.movementX + 'px';
container.style.top = container.offsetTop + e.movementY + 'px';
}
})(Highcharts);
var chart = Highcharts.chart('container', {
series: [{
data: [1, 2]
}]
});
CSS:
#container {
width: 300px;
height: 200px;
position: absolute;
left: 100px;
top: 100px;
}
Живая демонстрация:http://jsfiddle.net/BlackLabel/gtqdheLc/