Highstock 平移异步加载数据答案

【问题标题】：Highstock panning asynchronously loading dataHighstock 平移异步加载数据
【发布时间】：2013-02-04 05:51:58
【问题描述】：

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

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

但是，这使用导航器/滚动条沿系列移动图表并在您停止滑动时加载数据，理想情况下，我想使用 highstock 的平移功能而不是导航器来移动，因为它也占用了空间很大。

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

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

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

这甚至可能吗？谢谢

【问题讨论】：

标签： javascript charts highcharts highstock

【解决方案1】：

我认为这是可能的，但这并不容易。

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

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/

【讨论】：

chart.tracker 不再适用于 Highcharts :( 是否有另一种方法来规范事件？
您可以在 Highcharts 9.0 中使用 chart.pointer.normalize(e) 代替
@slawekkolodziej delta 将是像素坐标与起点的差异。您的示例中缺少的是转换为 x 值（毫秒）
@mediafreakch 你挖了一个 8 年前的帖子！ :-) 我相信e.chartX 是 x 轴值中的 x 坐标，而不是像素位置。我相信今天的 Highcharts 提供了一种更好的方法来解决这个问题。

【解决方案2】：

要使@slawekkolodziej 的示例正常工作，您需要将 xAxis 上的 delta 转换为 ms，然后像这样更新 xAxis 极值：

window.chart = new Highcharts.StockChart({
    // chart options go here
}, function(chart) {
    var xAxis = chart.xAxis[0],
        startX;

    function drag(e) {
      e = chart.pointer.normalize(e);
      startX = e.chartX;
    }

    function drop(e) {
      e = chart.pointer.normalize(e);

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

      xAxis.setExtremes(newMin, newMax)
    }

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

这是一个异步数据加载的工作示例：http://jsfiddle.net/xw7goLj4/5/

【讨论】：