以观念自d_paul的帖子,并从SO post.On评选活动,我加入plotBand
和暂停按钮。默认重置按钮删除plotBand
和按钮。希望这个逻辑接近你的要求,并且在反应模式中也使用相同的逻辑。
代码片段
chart: {
zoomType: 'x',
events: {
selection: function(event) {
if ($('.pausebutton') != null) {
$('.pausebutton').remove();
}
var chart = this,
normalState = new Object();
hoverState = new Object();
hoverState = normalState;
hoverState.fill = 'red';
pressedState = new Object();
pressedState = normalState;
var pausebutton = chart.renderer.button('Pause', 94, 10, function() {
disableZoom = 1;
}, null, hoverState, pressedState).attr({
class: 'pausebutton'
}).add();
if (event.resetSelection) {
this.xAxis[0].removePlotBand('plot-band-1');
$('.pausebutton').remove();
disableZoom=0;
return;
}
if (disableZoom == 1) {
return false;
}
var xAxis = event.xAxis[0],
plotLinesAndBands = xAxis.axis.plotLinesAndBands,
xMin = xAxis.min,
xMax = xAxis.max;
// event.preventDefault();
if (plotLinesAndBands.length > 0) {
xAxis.axis.removePlotBand('plot-band-1');
}
chart.xAxis[0].addPlotBand({
from: xMin,
to: xMax,
color: 'rgba(209, 228, 235, 0.5)',
id: 'plot-band-1'
});
const {
min,
max,
axis
} = event.xAxis[0];
const x = event.originalEvent.clientX - 150;
const y = event.originalEvent.clientY - 100;
var dom = $(`<div class="modal-chart" style="height: 200px; width: 300px; left: ${x}px; top: ${y}px;"></div>`);
$(document.body).append(dom);
// I want to "pause" the selection progress here
// and render a react component in the modal div above
// so I can continue the selection progress
// or dispatch some action to redux to do some other jobs
// ReactDOM.render(<Test></Test>, dom[0]);
}
}
},
Fiddle Demonstration
添加活生生的例子[小提琴](https://jsfiddle.net/),您做了_a模式格会在图表上显示,_。它将帮助用于满足所需的行为。 –
@ Deep3015你好,我添加一个jsfiddle https://jsfiddle.net/jd4onsr7/1/ – miaojiuchen