javascript - Highcharts 捕获选择

Question

我的网页上有一个 Highcharts ，它是折线图。它具有缩放功能，我使用 chart.events.selection 捕获缩放事件。一切正常。

但我想连续捕获选择事件(即基本上是单击和拖动事件)以在选择的开头和结尾显示工具提示，以显示用户选择的时间。在 Highcharts 文档中找不到。任何帮助，将不胜感激。

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

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

                        if(!event.xAxis)
                            return;

                        .....

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

    }
});

旧答案:

example来自官方API 可以扩展到你需要的。

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/