highcharts拖动和点击之间的可拖动点冲突 [英] highcharts draggable-points conflict between drag and click

问题描述

我使用带有可拖动点模块的highcharts 3.0.7，以便拖动显示的系列的点。

用户应该能够拖动指向移动它，但也点击一个点来删除它。

问题在于拖动事件接管了点击事件，后者未被解雇。

这是我的代码：

HTML：

 < script src =http ：//code.highcharts.com/highcharts.js>< /脚本> 
< script src =http://code.highcharts.com/highcharts-more.js>< / script> 
< script src =https://rawgithub.com/highslide-software/draggable-points/master/draggable-points.js>< / script> 
< div id =containerstyle =height：400px>< / div> 
  

JS：

  var options = {
图表：{
 renderTo：'container'，
}，
 tooltip：{enabled：false}，
 plotOptions： {
 series：{
 animation：false，
 allowPointSelect：true，
 point：{
 events：{
 click：function（event）{
 console.log（'click fired'）; 
 this.remove（）; 
} 
} 
} 
} 
}，
系列：[{}] 
}; 
 options.series [0] .data = [[1,1]，[2,3]，[4,2]]; 
 options.series [0] .draggableX = true; 
 options.series [0] .draggableY = true; 
 
 new Highcharts.Chart（options）; 
  

http： //jsfiddle.net/eu2d0t1L/2/ 显示了这一点。

有没有办法让两个事件共存？相关问题：当​​我评论时：

  // options.series [0] .draggableX = true; 
 // options.series [0] .draggableY = true; 
  

删除点正在运行，但会生成一个错误： Uncaught TypeError：object is not highcharts.js中的一个函数：220 。为什么？

解决方案

嗯，我不是highcharts.js专家，但是因为我没有得到任何答案，所以我修补了draggable-points.js让它像我想要的那样工作。

补丁位于 // START PATCH 和 // END PATCH

 函数drop（e）{
 if（dragPoint）{
 if（e）{
 var originalEvent = e.originalEvent || e，
 pageX = originalEvent.changedTouches？ originalEvent.changedTouches [0] .pageX：e.pageX，
 pageY = originalEvent.changedTouches？ originalEvent.changedTouches [0] .pageY：e.pageY，
 draggableX = dragPoint.series.options.draggableX，
 draggableY = dragPoint.series.options.draggableY，
 deltaX = dragX  -  pageX ，
 deltaY = dragY  -  pageY，
 series = dragPoint.series，
 isScatter = series.type ==='bubble'|| series.type ==='scatter'，
 newPlotX = isScatter？ dragPlotX  -  deltaX：dragPlotX  -  deltaX  -  dragPoint.series.xAxis.minPixelPadding，
 newPlotY = chart.plotHeight  -  dragPlotY + deltaY，
 newX = dragX === undefined？ dragPoint.x：dragPoint.series.xAxis.translate（newPlotX，true），
 newY = dragY === undefined？ dragPoint.y：dragPoint.series.yAxis.translate（newPlotY，true）; 
 
 // START补丁
 
 if（deltaX == 0&& deltaY == 0）{//它实际上是一个点击;不要把它当作D& D 
 dragPoint = null; 
 return; 
} 
 else {
 e.preventDefault（）; //防止将其作为点击处理
} 
 
 // END修补程序
 
 ... 
  

I am using highcharts 3.0.7 with draggable-points module, to make it possible to drag points of a displayed series.

User should be able to drag a point to move it, but also to click on a point to remove it.

The problem is that dragging event takes over click event and the latter is not fired.

Here is my code:

HTML:

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="https://rawgithub.com/highslide-software/draggable-points/master/draggable-points.js"></script>
<div id="container" style="height: 400px"></div>

JS:

var options = {
    chart: {
        renderTo: 'container',
    },
    tooltip: { enabled: false },
    plotOptions: {
        series: {
            animation: false,
            allowPointSelect: true,
            point: {
                events: {
                    click: function (event) {
                        console.log('click fired');
                        this.remove();
                    }
                }
            }
        }
    },
    series: [{}]
};
options.series[0].data = [[1,1], [2,3],[4,2]];
options.series[0].draggableX = true;
options.series[0].draggableY = true;

new Highcharts.Chart(options);

http://jsfiddle.net/eu2d0t1L/2/ shows this.

Is there a way to allow both events to co-exist ?

Related question: when I comment:

// options.series[0].draggableX = true;
// options.series[0].draggableY = true;

Point removal is working but generates an error: Uncaught TypeError: object is not a function in highcharts.js: 220. Why ?

解决方案

Well, I am not a highcharts.js specialist, but since I didn't get any answer, I patched draggable-points.js to make it work like I wanted.

The patch is between // START PATCH and // END PATCH

    function drop(e) {
        if (dragPoint) {
            if (e) {
                var originalEvent = e.originalEvent || e,
                    pageX = originalEvent.changedTouches ? originalEvent.changedTouches[0].pageX : e.pageX,
                    pageY = originalEvent.changedTouches ? originalEvent.changedTouches[0].pageY : e.pageY,
                    draggableX = dragPoint.series.options.draggableX,
                    draggableY = dragPoint.series.options.draggableY,
                    deltaX = dragX - pageX,
                    deltaY = dragY - pageY,
                    series = dragPoint.series,
                    isScatter = series.type === 'bubble' || series.type === 'scatter',
                    newPlotX = isScatter ? dragPlotX - deltaX : dragPlotX - deltaX - dragPoint.series.xAxis.minPixelPadding,
                    newPlotY = chart.plotHeight - dragPlotY + deltaY,
                    newX = dragX === undefined ? dragPoint.x : dragPoint.series.xAxis.translate(newPlotX, true),
                    newY = dragY === undefined ? dragPoint.y : dragPoint.series.yAxis.translate(newPlotY, true);

                // START patch

                if ( deltaX == 0 && deltaY == 0 ) { // it's actually a click; don't handle it as D&D
                    dragPoint = null;
                    return;
                }
                else {
                    e.preventDefault();  // prevents handling it as a click
                }

                // END patch

...

这篇关于highcharts拖动和点击之间的可拖动点冲突的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！