HighCharts可拖动曲线与对数轴刻度 [英] HighCharts Draggable Plotline with Logarithmic axis scale
问题描述
我有一个简单的折线图,使用HighCharts&试图添加可拖动的情节。
$(function(){
function draggablePlotLine(axis ,plotLineId){
var clickX,clickY;
var getPlotLine = function(){
for(var i = 0; i< axis.plotLinesAndBands.length; i ++) {
if(axis.plotLinesAndBands [i] .id === plotLineId){
return axis.plotLinesAndBands [i];
}
}
};
var getValue = function(){
var plotLine = getPlotLine();
var translation = axis.horiz?plotLine.svgElem.translateX:plotLine.svgElem.translateY;
var new_value = axis.toValue(translation) - axis.toValue(0)+ plotLine.options.value;
new_value = Math.max(axis.min,Math.min(axis.max,new_value)) ;
return new_value;
};
var drag_start = function(e){
$(document).bind({
'mousemove.line ':drag_step,
'mouseup.line':drag_stop
});
var plotLine = getPlotLine();
clickX = e.pageX - plotLine.svgElem.translateX;
clickY = e.pageY - plotLine.svgElem.translateY;
if(plotLine.options.onDragStart){
plotLine.options.onDragStart(getValue());
}
};
var drag_step = function(e){
var plotLine = getPlotLine();
var new_translation = axis.horiz? e.pageX - clickX:e.pageY - clickY;
var new_value = axis.toValue(new_translation) - axis.toValue(0)+ plotLine.options.value;
new_value = Math.max(axis.min,Math.min(axis.max,new_value));
new_translation = axis.toPixels(new_value + axis.toValue(0) - plotLine.options.value);
plotLine.svgElem.translate(
axis.horiz?new_translation:0,
axis.horiz?0:new_translation);
if(plotLine.options.onDragChange){
plotLine.options.onDragChange(new_value);
}
};
var drag_stop = function(){
$(document).unbind('。line');
var plotLine = getPlotLine();
var plotLineOptions = plotLine.options;
//删除+重新插入绘图线
//否则当图表调整大小时会变得混乱
if(plotLine.svgElem.hasOwnProperty('translateX')){
plotLineOptions.value = getValue()
axis.removePlotLine(plotLineOptions.id);
axis.addPlotLine(plotLineOptions);
if(plotLineOptions.onDragFinish){
plotLineOptions.onDragFinish(plotLineOptions.value);
$ b $ getPlotLine()。svgElem
.css({'cursor':'pointer'})
.translate(0,0 )
.on('mousedown',drag_start);
};
drag_stop();
};
$('#container')。highcharts({
xAxis:{
分钟:-10,
最多10,
plotLines:[{
id:'foo',
color:'#00F',
width:4,
value:5,
onDragStart:function( new_value){
$(#x_value)。text(new_value +'(Not changed yet)');
},
onDragChange:function(new_value){
$ (#x_value)。text(new_value +'(Dragging)');
},
onDragFinish:function(new_value){
$(#x_value)。text(new_value );
}
}]
},
yAxis:{
类型:'对数',
plotLines:[{
label:{
text:'Not draggable'
},
id:'y1',
color:'#CCC',
width:4,
值:150
},{
id:'y2',
颜色:'#00F',
宽度:4,
值:200,
onDragStart:function(new_value){
$(#y_value)。text(new_value +'(Not changed yet)');
},
onDragChange:function(new_value){
$(#y_value)。text(new_value +'(Dragging)');
},
onDragFinish:function(new_value){
$(#y_value)。text(new_value);
}
},{
label:{
text:'不可拖动'
},
id:'y3',
color :'#CCC',
width:4,
value:250
}]
},
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]
}]
},函数(图表){
draggablePlotLine(chart .xAxis [0],'foo');
draggablePlotLine(chart.yAxis [0],'y2');
console.log('ready');
});
});
JSFiddle链接: http://jsfiddle.net/48awM/30/ (实际)
我的分叉更新: http://jsfiddle.net/kk8322/z62nnmwe/1/
实际的JSFiddle可以正常工作 - 这是正常的在拖动plotline时分叉版本失败。实际与唯一的区别
类型:'logarithmic'
为轴添加对数刻度不能正确处理拖放操作。请教我如何处理带有对数x / y轴比例的可拖动曲线。 解决方案
拖放。它适用于
对数
类型轴。 示例: http://jsfiddle.net/tret53sv/
$( function(){
var line,
clickX,
clickY;
var start = function(e){
$(document).bind({
'mousemove.line':step,
'mouseup.line':stop
});
clickY = e .pageY - line.translateY;
// clickY = e.pageY - line.translateY; //取消注释如果plotline也应该垂直移动
}
var step = function (e){
line.translate(e.pageX - clickX,e.pageY - clickY)
}
var stop = function(){
$(文件).unbind('。line');
}
$('#container')。highcharts({
xAxis:{
categories:[' Jan','Feb','Mar','Apr','May', 'Jun','Jul','Aug','Sep','Oct','Nov','Dec']
},
yAxis:{
type:'logarithmic' ,
plotLines:[{
color:'#FF0000',
width:5,
value:100
}]
},
系列:[{
数据:[29.9,71.5,106.4,129.2,144.0,176.0,135.6,148.5,216.4,194.1,95.6,54.4]
}]
},function(chart){
line = chart.yAxis [0] .plotLinesAndBands [0] .svgElem.attr({
stroke:'yellow'
})
.css({
'cursor':'pointer'
})
.translate(0,0)
.on('mousedown',start);
});
});
I have a simple Line chart using HighCharts & trying to add draggable plotlines in it.
$(function () {
function draggablePlotLine(axis, plotLineId) {
var clickX, clickY;
var getPlotLine = function () {
for (var i = 0; i < axis.plotLinesAndBands.length; i++) {
if (axis.plotLinesAndBands[i].id === plotLineId) {
return axis.plotLinesAndBands[i];
}
}
};
var getValue = function() {
var plotLine = getPlotLine();
var translation = axis.horiz ? plotLine.svgElem.translateX : plotLine.svgElem.translateY;
var new_value = axis.toValue(translation) - axis.toValue(0) + plotLine.options.value;
new_value = Math.max(axis.min, Math.min(axis.max, new_value));
return new_value;
};
var drag_start = function (e) {
$(document).bind({
'mousemove.line': drag_step,
'mouseup.line': drag_stop
});
var plotLine = getPlotLine();
clickX = e.pageX - plotLine.svgElem.translateX;
clickY = e.pageY - plotLine.svgElem.translateY;
if (plotLine.options.onDragStart) {
plotLine.options.onDragStart(getValue());
}
};
var drag_step = function (e) {
var plotLine = getPlotLine();
var new_translation = axis.horiz ? e.pageX - clickX : e.pageY - clickY;
var new_value = axis.toValue(new_translation) - axis.toValue(0) + plotLine.options.value;
new_value = Math.max(axis.min, Math.min(axis.max, new_value));
new_translation = axis.toPixels(new_value + axis.toValue(0) - plotLine.options.value);
plotLine.svgElem.translate(
axis.horiz ? new_translation : 0,
axis.horiz ? 0 : new_translation);
if (plotLine.options.onDragChange) {
plotLine.options.onDragChange(new_value);
}
};
var drag_stop = function () {
$(document).unbind('.line');
var plotLine = getPlotLine();
var plotLineOptions = plotLine.options;
//Remove + Re-insert plot line
//Otherwise it gets messed up when chart is resized
if (plotLine.svgElem.hasOwnProperty('translateX')) {
plotLineOptions.value = getValue()
axis.removePlotLine(plotLineOptions.id);
axis.addPlotLine(plotLineOptions);
if (plotLineOptions.onDragFinish) {
plotLineOptions.onDragFinish(plotLineOptions.value);
}
}
getPlotLine().svgElem
.css({'cursor': 'pointer'})
.translate(0, 0)
.on('mousedown', drag_start);
};
drag_stop();
};
$('#container').highcharts({
xAxis: {
min: -10,
max: 10,
plotLines: [{
id: 'foo',
color: '#00F',
width: 4,
value: 5,
onDragStart: function (new_value) {
$("#x_value").text(new_value + ' (Not changed yet)');
},
onDragChange: function (new_value) {
$("#x_value").text(new_value + ' (Dragging)');
},
onDragFinish: function (new_value) {
$("#x_value").text(new_value);
}
}]
},
yAxis: {
type: 'logarithmic',
plotLines: [{
label: {
text: 'Not draggable'
},
id: 'y1',
color: '#CCC',
width: 4,
value: 150
}, {
id: 'y2',
color: '#00F',
width: 4,
value: 200,
onDragStart: function (new_value) {
$("#y_value").text(new_value + ' (Not changed yet)');
},
onDragChange: function (new_value) {
$("#y_value").text(new_value + ' (Dragging)');
},
onDragFinish: function (new_value) {
$("#y_value").text(new_value);
}
}, {
label: {
text: 'Not draggable'
},
id: 'y3',
color: '#CCC',
width: 4,
value: 250
}]
},
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]
}]
}, function (chart) {
draggablePlotLine(chart.xAxis[0], 'foo');
draggablePlotLine(chart.yAxis[0], 'y2');
console.log('ready');
});
});
JSFiddle Link: http://jsfiddle.net/48awM/30/ (actual) My Forked Update: http://jsfiddle.net/kk8322/z62nnmwe/1/
Actual JSFiddle works fine - which has normal axis scale, but forked version fails while dragging plotline. Only difference between actual & forked version is that my Y-Axis will be of type "Logarithmic".
type: 'logarithmic'
Adding Logarithmic scale for axis is not handling drag/drop properly. Please suggest me how to handle Draggable Plotlines with Logarithmic x/y axis scale.
There is a simpler way to move line while drag and drop. It works fine on logarithmic
type axis.
Example: http://jsfiddle.net/tret53sv/
$(function () {
var line,
clickX,
clickY;
var start = function (e) {
$(document).bind({
'mousemove.line': step,
'mouseup.line': stop
});
clickY = e.pageY - line.translateY;
//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');
}
$('#container').highcharts({
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis:{
type:'logarithmic',
plotLines: [{
color: '#FF0000',
width: 5,
value: 100
}]
},
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]
}]
}, function (chart) {
line = chart.yAxis[0].plotLinesAndBands[0].svgElem.attr({
stroke: 'yellow'
})
.css({
'cursor': 'pointer'
})
.translate(0, 0)
.on('mousedown', start);
});
});
这篇关于HighCharts可拖动曲线与对数轴刻度的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!