Javascript 海图捕捉选择

我在我的网页上有一个很高的图表，它是一个折线图。它具有缩放功能，我使用

chart.events.selection

捕获缩放事件。一切正常

但我希望连续捕获选择事件（即基本上是单击并拖动事件），在选择的开始和结束处显示工具提示，以显示用户选择的时间。在high charts文档中找不到。任何帮助都将不胜感激

以下是捕获选择事件的当前代码：

$(obj.id).highcharts({
        chart: {
            type: 'areaspline',
            backgroundColor:"rgba(0,0,0,0)",
            zoomType:"x",
            events: {
                    selection: function(event){

                        if(!event.xAxis)
                            return;

                        .....

更新： 更新了示例，其中标签位于选择标记之后：

我不认为存在拖动事件（不适用于点），但可以包装拖动指针的方法

Highcharts.wrap(Highcharts.Pointer.prototype, 'drag', function (p, e) {
    p.call(this, e);

    var H = Highcharts,
        chart = this.chart,
        selectionMarker = this.selectionMarker,
        bBox,
        xAxis,

        labelLeft,
        labelRight,
        labelY,
        attr,
        css,

        timerLeft,
        timerRight;

    if (selectionMarker) {
         if (!chart.customLabels) {
            chart.customLabels = [];
        }

        bBox = selectionMarker.getBBox();
        xAxis = chart.xAxis[0];
        labelLeft = chart.customLabels[0];
        labelRight = chart.customLabels[1];
        labelY = chart.plotTop + 10;

        if (!labelLeft || !labelRight) {
            attr = {
                fill: Highcharts.getOptions().colors[0],
                padding: 10,
                r: 5,
                zIndex: 8
            };

            css = {
                color: '#FFFFFF'
            };

            labelLeft = chart.renderer.label('', 0, 0).attr(attr).css(css).add();
            labelRight = chart.renderer.label('', 0, 0).attr(attr).css(css).add();

            chart.customLabels.push(labelLeft, labelRight);
        }

        clearTimeout(timerLeft);
        clearTimeout(timerRight);

        labelLeft.attr({
            x: bBox.x - labelLeft.getBBox().width,
            y: labelY,
            text: 'min: ' + H.numberFormat(xAxis.toValue(bBox.x), 2),
            opacity: 1
            });

        labelRight.attr({
            x: bBox.x + bBox.width,
            y: labelY,
            text: 'max: ' + H.numberFormat(xAxis.toValue(bBox.x + bBox.width), 2),
            opacity: 1
            });

        timerLeft = setTimeout(function () {
            labelLeft.fadeOut();
        }, 3000);

        timerRight = setTimeout(function () {
            labelRight.fadeOut();
        }, 3000);

    }
});

旧答案： 从官方API中删除 可以扩展到您需要的范围

JSFIDLE上的代码和示例如下：

function positionLabels(e, chart) {
    if (!chart.customLabels) {
        chart.customLabels = [];
    }

    var labelLeft,
        labelRight,
        attr,
        css,

        xAxis,
        xMin,
        xMax,
        yAxis,
        yMin,
        yMax,
        yMiddle,
        timerLeft,
        timerRight;

    if (!e.resetSelection) {
        labelLeft = chart.customLabels[0];
        labelRight = chart.customLabels[1];

        if (!labelLeft || !labelRight) {
            attr = {
                fill: Highcharts.getOptions().colors[0],
                padding: 10,
                r: 5,
                zIndex: 8
            };

            css = {
                color: '#FFFFFF'
            };

            labelLeft = chart.renderer.label('', 0, 0).attr(attr).css(css).add();
            labelRight = chart.renderer.label('', 0, 0).attr(attr).css(css).add();

            chart.customLabels.push(labelLeft, labelRight);
        }

        clearTimeout(timerLeft);
        clearTimeout(timerRight);

        xAxis = e.xAxis[0].axis;
        xMin = e.xAxis[0].min;
        xMax = e.xAxis[0].max;

        yAxis = chart.yAxis[0];
        yMin = yAxis.min;
        yMax = yAxis.max;
        yMiddle = (yMax - yMin) * 0.95;

        labelLeft.attr({
            x: xAxis.toPixels(xMin) - labelLeft.getBBox().width,
            y: yAxis.toPixels(yMiddle),
            text: 'min: ' + Highcharts.numberFormat(xMin, 2),
            opacity: 1
        });

        labelRight.attr({
            x: xAxis.toPixels(xMax),
            y: yAxis.toPixels(yMiddle),
            text: 'max: ' + Highcharts.numberFormat(xMax, 2),
            opacity: 1
        });

        timerLeft = setTimeout(function () {
            labelLeft.fadeOut();
        }, 2000);

        timerRight = setTimeout(function () {
            labelRight.fadeOut();
        }, 2000);
    }
}

---

示例：

谢谢，但这不是我要找的。我希望在拖动和选择范围时，最小值和最大值可见。你的意思是你不想放大选定区域，只显示带有最小值/最大值的标签？如果它是不同的，你需要详细说明一下。我想放大选定的区域。但我想要的是，标签应该在我开始拖动以选择区域时开始显示，而不是在我完成选择时。“最大”和“最小”上应有两个标签，当我拖动“选择区域”时，该值应不断更改。我希望这次是清楚的……）谢谢你的耐心：）正是我想要的！谢谢，伙计。：）顺便问一下，你是怎么做到的？你是从哪里得到这些文档来做这些的？在官方网站上有一个叫做Highcharts扩展的部分，然后阅读Highcharts源代码。如果我的答案解决了您的问题，请单击我的答案旁边的复选标记，这样该主题将有一个可接受的答案。