我想将拖放功能添加到yAxis上的绘图线,因为我的图表已被反转。
我发现几个问题似乎让我如此接近解决方案,但我无法使用React-Highcharts包实现解决方案。
这两种解决方案都说明了一个非常可行的解决方案。我的问题是将解决方案转换为React-Highcharts组件。
这是JSFiddle,其中包含我的图表的简化版本。
以下是我目前的yAxis配置
config.yaxis = {
title: 'Times',
descrition: 'Times within a 24 hour day.',
endOnTick: false,
opposite: true,
min: Date.UTC(0,0,0,0,0,0),
max: Date.UTC(0,0,0,24,30,0),
plotLines: [{
value: Date.UTC(0,0,0,6,0,0),
id: 'plotLineId',
color: colorObj.open,
dashStyle: 'shortdash',
width: 2,
zIndex: 4,
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);
}
}, {
value: Date.UTC(0,0,0,21,0,0),
id: 'plotLineId',
color: colorObj.close,
dashStyle: 'shortdash',
width: 2,
zIndex: 4,
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);
}
}],
type: 'datetime',
dateTimeLabelFormats: {
minute: '%l:%M%p',
hour: '%l %p',
day: '%l %p'
},
events: {
mouseOver: function (e) {
console.log('mouseOver - ', e);
}
}
}
以及我在ReactHighcharts组件的文件中所拥有的内容
import React, { Component } from 'react';
import ReactHighcharts from 'react-highcharts'
import { allViewConfig } from './graphConfigs/graphConfigs';
class Graph extends Component {
afterRender = (chart) => {
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();
};
}
render(){
return (
<div>
<ReactHighcharts
config={allViewConfig(this.props.configArr, this.props.bandRow, this.props.configVars)}
callback = {this.afterRender}
/>
</div>
);
}
};
export default Graph;
答案 0 :(得分:1)
搞定了。有几点需要调整。
$
onDragStart
,onDragChange
和onDragFinish
不是必需的。如果你确实需要/想要它们只是转换JQuery,就像在第2步中一样,你会很高兴。 以下是工作ReactHighcharts组件的代码。
import React, { PureComponent } from 'react';
import ReactHighcharts from 'react-highcharts'
import { allViewConfig } from './graphConfigs/graphConfigs';
import moment from 'moment'
class Graph extends PureComponent {
// Step 1a code
afterRender = (chart) => {
// this.draggablePlotLine(chart.xAxis[0], 'foo');
this.draggablePlotLine(chart.yAxis[0], 'plotLineIdOpen');
this.draggablePlotLine(chart.yAxis[0], 'plotLineIdClose');
console.log('ready');
}
// End Step 1a code
draggablePlotLine = (axis, plotLineId) => {
var clickX, clickY;
var getPlotLine = () => {
for (var i = 0; i < axis.plotLinesAndBands.length; i++) {
if (axis.plotLinesAndBands[i].id === plotLineId) {
return axis.plotLinesAndBands[i];
}
}
};
var getValue = () => {
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 = (e) => {
// Step 2a code
document.addEventListener('mousemove', drag_step);
document.addEventListener('mouseup', drag_stop);
// Step 2a code
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 = (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 test = (value) => {
console.log(value);
console.log(this);
this.props.updateState({key:['plotClose'], value: 'test' });
// this.props.updateState({key:['plotOpen'], value: value });
}
var drag_stop = () => {
// Step 2b code
document.removeEventListener('mousemove', drag_step);
document.removeEventListener('mouseup', drag_stop);
// Step 2b code
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()
// console.log(moment.utc(plotLineOptions.value).format('MMMM Do YYYY, h:mm:ss a'));
// console.log(plotLineOptions);
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();
}
render(){
return (
<div>
<ReactHighcharts
config={allViewConfig(this.props.configArr.toArray(), this.props.bandRow, this.props.configVars)}
// Step 1b code
callback = {this.afterRender}
// End Step 1b code
/>
</div>
);
}
};
export default Graph;