Добавление всплывающих подсказок для предварительно настроенных диапазонов дат на биржевой диаграмме (Highstock)

Question

Я хочу добавить несколько подсказок для предварительно настроенных кнопок диапазона дат (например, 1 день, 1 месяц и т. Д.) На биржевой диаграмме в highstock.Я не могу найти способ сделать это.

обратитесь по этой ссылке

Любая помощь будет оценена.Спасибо

Answer 1

Highcharts не имеет встроенной подсказки для rangeSelector, но вы все равно можете создать свою собственную подсказку для этого. Добавить события к кнопкам очень просто:

Highcharts.stockChart('container', {
    chart: {
        events: {
            load: function() {
                var chart = this,
                    buttons = chart.rangeSelector.buttons;

                for (var i = 0, len = buttons.length; i < len; i++) {
                    (function(i) {
                        var item = buttons[i],
                            group = $('.highcharts-range-selector-tooltip'),
                            rectElem = $('.range-selector-tooltip'),
                            textElem = $('.range-selector-tooltip-text'),
                            box;

                        item.on('mouseover', function(e) {
                            // Define legend-tooltip text
                            var str = item.text.textStr;
                            textElem.text(str)

                            // Adjust rect size to text
                            box = textElem[0].getBBox()
                            rectElem.attr({
                                x: box.x - 8,
                                y: box.y - 5,
                                width: box.width + 15,
                                height: box.height + 10
                            })

                            // Show tooltip
                            group.attr({
                                transform: `translate(${e.clientX + 7}, ${e.clientY + 7})`
                            })

                        }).on('mouseout', function(e) {

                            // Hide tooltip
                            group.attr({
                                transform: 'translate(-9999,-9999)'
                            })
                        });
                    })(i);
                }
            }
        }
    },

    ...

}, function(chart) {
    var group = chart.renderer.g('range-selector-tooltip')
        .attr({
            transform: 'translate(-9999, -9999)',
            zIndex: 99
        }).add(),
        text = chart.renderer.text()
        .attr({
            class: 'range-selector-tooltip-text',
            zIndex: 7
        }).add(group),
        box = text.getBBox();

    chart.renderer.rect().attr({
            'class': 'range-selector-tooltip',
            'stroke-width': 1,
            'stroke': 'grey',
            'fill': 'white',
            'zIndex': 6
        })
        .add(group)
});

Живой пример: http://jsfiddle.net/BlackLabel/Lg9cfrub/

Справочник по API : https://api.highcharts.com/highstock/chart.events.load