Highchart 反应 - x 轴可拖动

Question

有没有办法让 x 轴从左向右交互式拖动，反之亦然？例如，百分比 x 轴可以从左到右或从右到左拖动

Answer 1

首先，您需要创建或找到一些将用作挂钩的元素。接下来，使用 mousemove 平移轴并在 mouseup 事件回调中进行清理。例如：

const chart = Highcharts.chart('container', {...});

chart.customLine = chart.renderer.path([
        'M',
        chart.plotLeft,
        chart.plotTop,
        'L',
        chart.plotLeft,
        chart.plotTop + chart.plotHeight
    ]).attr({
        stroke: '#ff00ff',
        'stroke-width': 7
    })
    .on('mousedown', function() {
        chart.isDraggingAxis = true;
    })
    .add();

chart.container.addEventListener('mousemove', function(e) {
    if (chart.isDraggingAxis) {
        const yAxis = chart.yAxis[0];

        chart.customLine.translate(e.x - chart.plotLeft);
        yAxis.labelGroup.translate(e.x - chart.plotLeft);
    }
});

document.addEventListener('mouseup', function(e) {
    if (chart.isDraggingAxis) {
        chart.isDraggingAxis = false;
    }
});

现场演示： http://jsfiddle.net/BlackLabel/jervfkoc/

API参考：https://api.highcharts.com/class-reference/Highcharts.SVGElement#translate

Highchart 反应 - x 轴可拖动

Highchart react - x axis draggable

reactjs

highcharts

react-highcharts