Highcharts绘图线拖动xAxis事件
我想在xAxis上拖动Highcharts绘图线拖动xAxis事件,highcharts,Highcharts,我想在xAxis上拖动绘图线，并检测此更改。 有人能举个例子吗 编辑 @迪蒙诺 以下是我到目前为止所做的尝试。单击事件未触发。 通过这种方法，我想添加、dragstart、dragend等事件来启用拖动功能 <html> <head> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></scri
绘图线<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="container" style ="height : 400px">
</div>
</body>
<script type="text/javascript">
(function(H){
H.Chart.prototype.callbacks.push(function(chart){
H.addEvent(chart.xAxis[0].plotLinesAndBands[0].svgElem,'click',function(e){
console.log('click from plugin');
});
});
}(Highcharts));
$(document).ready(function(){
var chart = new Highcharts.Chart({
chart : {
renderTo: 'container'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
plotLines: [{
color: '#FF0000',
width: 2,
value: 5.5
}]
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
});
</script>
</html>
（职能（H）{
H.Chart.prototype.callbacks.push（函数（图表）{
H.addEvent（chart.xAxis[0]。plotLinesAndBands[0]。svgElem，“单击”，函数（e）{
log（'click from plugin'）；
});
});
}（高图）；
$（文档）.ready（函数（）{
var图表=新的Highcharts.图表({
图表：{
renderTo:“容器”
},
xAxis：{
类别：[一月、二月、三月、四月、五月、六月、七月、八月、九月、十月、十一月、十二月]，
绘图线：[{
颜色：“#FF0000”，
宽度：2，
价值：5.5
}]
},
系列：[{
数据：[29.9,71.5,106.4,129.2,144.0,176.0,135.6148.5,216.4194.1,95.6,54.4]
}]
});
});
svgElem元素on（）chart.xAxis[0].plotLinesAndBands[0].svgElem.on('click', function () {
console.log('click from plugin');
});
svgElem元素on（）chart.xAxis[0].plotLinesAndBands[0].svgElem.on('click', function () {
console.log('click from plugin');
});
您可以使用Highcharts translate函数在JavaScript中准备它 见工作示例： 海图回调
$('#container').highcharts(options, function(chart){
line = chart.xAxis[0].plotLinesAndBands[0].svgElem.attr({
stroke: 'yellow'
})
.css({
'cursor': 'pointer'
})
.translate(0, 0)
.on('mousedown', start);
});
您可以使用Highcharts translate函数在JavaScript中准备它 见工作示例： 海图回调
$('#container').highcharts(options, function(chart){
line = chart.xAxis[0].plotLinesAndBands[0].svgElem.attr({
stroke: 'yellow'
})
.css({
'cursor': 'pointer'
})
.translate(0, 0)
.on('mousedown', start);
});
你能告诉我们你已经试过什么吗？我们不会简单地为您编写代码，但是如果您有不工作的代码，我们可以帮助您修复它。您能取消对这个问题的搁置吗？您能告诉我们您已经尝试了什么吗？我们不会简单地为您编写代码，但如果您有不工作的代码，我们可以帮助您修复它。您可以取消对这个问题的保留吗？它可以工作，但如果我调整窗口大小，绘图线会改变其位置。绘制线的目的是选择一个范围。因为绘制线与图表相关，所以当您调整大小时，绘制线会移动。如果需要添加“绝对”行，则应使用renderer.path。我还有最后一个问题。如何在“mousemove.line”中传递数据：步骤事件绑定？我熟悉通用的
$（element）.bind（'event'，data，function）$（element）.bind（'event'，data，function）