Javascript 使HighChart容器可拖动

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

我正在评估用于工作项目的HighCharts

其中一个要求是能够单击图表，并将整个图表拖放到页面上的其他位置（div）

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

我还没有能够实现HTML5在高图表上的拖放。我尝试将图表的container DIV tag“draggable”属性设置为true，并将DIV的“ondragstart”事件设置为true，但从未触发drag start事件

我设想Highchart对象正在处理onclick事件，这样就不会触发drag start事件

另一个要求是，当您单击系列或图例标题时，用户仍然能够使用默认图表功能。例如，我们将允许用户单击饼图切片以打开一个新窗口“深入”到一个系列中以查看相关数据。因此，系列元素的onclick事件仍然需要正常运行。我想，拖动整个图表的能力意味着最初在容器内的某个“开放”空间中单击

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

谢谢

---

Courtney

可以通过覆盖

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]
   }]
 });

#container {
  width: 300px;
  height: 200px;
  position: absolute;
  left: 100px;
  top: 100px;
}

CSS:

 (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]
   }]
 });

#container {
  width: 300px;
  height: 200px;
  position: absolute;
  left: 100px;
  top: 100px;
}

现场演示：