Question

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

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

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

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

我无法在High Chart上实现此HTML5拖放功能。我尝试将图表的容器DIV标记“draggable”属性设置为true，并设置div的“ondragstart”事件，但是从不触发拖动启动事件。

我想Highchart对象正在处理onclick事件，因此不会触发拖动启动事件。

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

是否有人能够成功添加在HTML网页上拖放高图的功能？

由于

考特尼

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/

使HighChart容器可拖动

1 个答案: