我正在使用带有可拖动点模块的 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
。为什么?
最佳答案
好吧,我不是 highcharts.js 专家,但由于我没有得到任何答案,我修补了 draggable-points.js 以使其按我想要的方式工作。
补丁在//START PATCH
和//END PATCH
之间</p>
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
...
关于javascript - highcharts draggable-points 拖动和点击之间的冲突,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26861680/