Создание контейнера HighChart

Question

Кто-нибудь успешно смог добавить возможность перетаскивать большие диаграммы на HTML-страницу?

Я оцениваю HighCharts для использования в рабочем проекте.

Одним из требований будет возможность щелкнуть диаграмму и перетащить всю диаграмму в другое место (div) на странице.

HTML 5 имеет встроенные возможности перетаскивания, в которых вы просто устанавливаете свойство перетаскивания объекта на «true» и устанавливаете пару событий перетаскивания.

Мне не удалось реализовать перетаскивание HTML5 на высокой диаграмме. Я попытался установить для атрибута «draggable» тега DIV контейнера диаграммы значение true и событие div «ondragstart», но событие начала перетаскивания никогда не запускалось.

Я предполагаю, что объект Highchart обрабатывает события onclick, так что событие начала перетаскивания не запускается.

Еще одно требование заключается в том, что пользователь по-прежнему сможет использовать функциональность диаграммы по умолчанию при нажатии на серию или заголовок легенды. Например, мы позволим пользователю щелкнуть круговую часть, чтобы открыть новое окно для «детализации» в серию, чтобы увидеть связанные данные. Таким образом, событие onclick элементов серии все еще должно функционировать нормально. Я полагаю, что возможность перетаскивать весь график означала бы, что сначала нужно щелкнуть мышью в каком-нибудь «открытом» пространстве внутри контейнера.

Кто-нибудь успешно смог добавить возможность перетаскивать большие диаграммы на HTML-страницу?

Спасибо

Courtney

Answer 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/