Highcharts捕获选择

Question

我的网页上有一个高图表，这是一个折线图。它具有缩放功能，我使用$(obj.id).highcharts({ chart: { type: 'areaspline', backgroundColor:"rgba(0,0,0,0)", zoomType:"x", events: { selection: function(event){ if(!event.xAxis) return; ..... 捕获缩放事件。一切正常。

但我想继续捕捉选择事件（即基本上是点击并拖动事件），以在选择的开头和结尾显示工具提示，以显示用户选择的时间。无法在高级图表文档中找到。任何帮助，将不胜感激。

这是我当前捕获选择事件的代码：

<https:connector name="https">
    <spring:property name="sslType" value="TLSv1.2"/>
</https:connector>

Answer 1

更新

更新了选择标记后面的标签示例：http://jsfiddle.net/pq0wn0xx/2/

我认为没有拖动事件（不是针对点），但是你可以用拖动指针的方法。

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的example 可以扩展到你需要的东西。

jsfiddle上的代码和示例如下：

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);
    }
}

示例：http://jsfiddle.net/pq0wn0xx/