使 HighChart 容器可拖动答案

【问题标题】：Making a HighChart container draggble使 HighChart 容器可拖动
【发布时间】：2018-05-09 19:20:32
【问题描述】：

有没有人成功地在 HTML 页面上添加拖放高图的功能？

我正在评估在工作项目中使用 HighCharts。

其中一项要求是能够单击图表，并将整个图表拖放到页面上的不同位置 (div)。

HTML 5 内置了拖放功能，您只需将对象的可拖动属性设置为“true”并设置几个拖放事件。

我无法在高图表上实现这种 HTML5 拖放。我尝试将图表的容器 DIV 标签“draggable”属性设置为 true，并将 div 的“ondragstart”事件设置为，但从不触发拖动开始事件。

我认为 Highchart 对象正在处理 onclick 事件，因此不会触发拖动开始事件。

另一个要求是，当您单击系列或图例标题时，用户仍然能够使用默认图表功能。例如，我们将允许用户单击饼图以打开一个新窗口以“向下钻取”系列以查看相关数据。所以系列元素的onclick事件还是需要正常工作的。我想拖动整个图表的能力意味着最初单击容器内的一些“开放”空间。

是否有人成功地添加了在 HTML 页面上拖放高图的功能？

谢谢

考特尼

【问题讨论】：

标签： javascript html highcharts drag-and-drop

【解决方案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/

【讨论】：