首页 文章

使HighChart容器变得可拖动

提问于
浏览
0

Has anyone successfully been able to add the ability to drag and drop highcharts on an HTML page?

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

其中一个要求是能够单击图表,并将整个图表拖放到页面上的其他位置(div) .

HTML 5具有内置的拖放功能,您只需将对象的可拖动属性设置为“true”并设置几个拖放事件即可 .

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

我想Highchart对象正在处理onclick事件,因此不会触发drag start事件 .

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

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

谢谢

考特尼

1 回答

  • 0

    可以通过覆盖 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;
    }
    

    Live demo: http://jsfiddle.net/BlackLabel/gtqdheLc/

相关问题