Highcharts plotLine拖动xAxis事件 [英] Highcharts plotLine drag xAxis event
问题描述
我想在xAxis上拖一个 plotLine 并检测这个变化。
有人可以举个例子吗？
编辑
@ DiMono
这是我到目前为止所尝试过的。点击事件不会触发。
通过这种方法，我想添加dragstart，dragend等事件来启用拖动功能。
< html> ;
< head>
< script type =text / javascriptsrc =https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js>< / script>
< script type =text / javascriptsrc =http://code.highcharts.com/highcharts.js>< / script>
< / head>
< body>
< div id =containerstyle =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，
值：5.5
}]
}，
系列：[{
数据：[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>
您可以使用Highcharts translate函数。
请参阅工作示例： http：// jsfiddle。 net / VXTeR / 1 /
var line，
clickX，
clickY;
var start = function（e）{
$（document）.bind（{
'mousemove.line'：step，
'mouseup .line'：stop
}）;
clickX = e.pageX - line.translateX;
// clickY = e.pageY - line.translateY; //取消注释，如果剧情也应该垂直移动
}
var step = function（e）{
line.translate（e.pageX - clickX，e.pageY - clickY ）
}
var stop = function（）{
$（document）.unbind（'。line'）;
Highcharts回调
<$ $ {code $>'code> $（'＃container'）。highcharts（options，function（chart）{
$ b $ line = chart.xAxis [0] .plotLinesAndBands [0] .svgElem .attr（{
stroke：'yellow'
}）
.css（{
'cursor'：'pointer'
}）
.translate （0，0）
.on（'mousedown'，start）;
}）;
I would like to drag a plotLine on xAxis and detect this change.
Can someone please provide an example ?
Edit
@DiMono
Here is what I have tried so far. The click event is not firing. By this approach I would like to add, dragstart, dragend etc events to enable drag functionality.
<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>
You can prepare it in JavaScript with the Highcharts translate function.
See working example: http://jsfiddle.net/VXTeR/1/
var line,
clickX,
clickY;
var start = function (e) {
$(document).bind({
'mousemove.line': step,
'mouseup.line': stop
});
clickX = e.pageX - line.translateX;
//clickY = e.pageY - line.translateY; //uncomment if plotline should be also moved vertically
}
var step = function (e) {
line.translate(e.pageX - clickX, e.pageY - clickY)
}
var stop = function () {
$(document).unbind('.line');
}
Highcharts callback
$('#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 plotLine拖动xAxis事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
