Question

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

用户应该能够拖动一个点来移动它，还可以点击一个点来移除它。

问题是拖动事件会占用点击事件而后者不会被触发。

这是我的代码：

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/显示了这一点。

有没有办法让两个事件共存？

相关问题：我发表评论时：

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

删除点工作但生成错误：Uncaught TypeError: object is not a function in highcharts.js: 220。为什么？

Answer 1

好吧，我不是一个highcharts.js专家，但由于我没有得到任何答案，我修补了draggable-points.js以使其按照我想要的方式工作。

补丁介于// START PATCH和// 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 draggable-points冲突

1 个答案: