【问题标题】:highcharts draggable-points conflict between drag and clickhighcharts draggable-points 拖拽和点击冲突
【发布时间】:2017-07-18 21:35:23
【问题描述】:

我正在使用带有可拖动点模块的 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。为什么?

【问题讨论】:

    标签: javascript jquery highcharts


    【解决方案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
    
    ...
    

    【讨论】:

    • 我已将此错误报告给我们的开发人员here。无论如何感谢您的建议,我们会尽快解决此问题。
    猜你喜欢
    • 1970-01-01
    • 2016-11-10
    • 1970-01-01
    • 2021-10-20
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多