javascript - Highstock平移异步加载数据

使用Highstock是否可以拖动图表并异步加载数据？

我已经在highcharts网站http://jsfiddle.net/hcharge/5zPLV/上看到了异步演示

但是，这使用导航器/滚动条沿图表系列移动并在您停止滑动时加载数据。理想情况下，我想使用高股票的平移功能来代替导航器，因为它占用了太多空间。

如果我关闭了导航器和滚动条并禁用了zoomtype，则在演示中玩：x然后，一旦您开始拖动图表，它将尝试获取数据，从而使图表无法使用。这是http://jsfiddle.net/hcharge/6YSvk/的小提琴

navigator: {enabled: false}, scrollbar: {enabled: false}

理想情况下，我们需要知道用户何时开始拖动以及何时停止然后加载数据。

这有可能吗？谢谢

最佳答案

我认为这是可能的，但绝非易事。

如您所写，您应该从检测拖放开始。使用内置选项是不可能的，但是我们可以添加自己的事件监听器。看一下这段代码：

new Highcharts.StockChart({
    // here comes your chart options, but we can pass callback function as the second parameter
}, function (chart) {
    var report = document.getElementById('report'), // just an element to display current extremes
        xAxis = chart.xAxis[0],
        startX;

    function drag(e) {
        e = chart.tracker.normalizeMouseEvent(e);
        startX = e.chartX;
    }

    function drop(e) {
        e = chart.tracker.normalizeMouseEvent(e);

        var delta = e.chartX - startX,
            extremes = xAxis.getExtremes(),
            newMin = Math.round(extremes.min - delta),
            newMax = Math.round(extremes.max - delta);

        // display extremes retrieved by panning
        report.innerHTML = "<b>From:</b> " + new Date(newMin) + " <b>to:</b> " + new Date(newMax);
    }

    // bind events
    Highcharts.addEvent(chart.container, 'mousedown', drag);
    Highcharts.addEvent(chart.container, 'mouseup', drop);
});

只需我们检测mouseDown和mouseUp事件，然后计算差异，将差异转换为x数据，最后减去极端值即可。

在这里，您可以找到带有上面发布的代码的jsfiddle演示：http://jsfiddle.net/dSEAA/1/