Question

我想在highstock的股票图表中为预配置的日期范围按钮（如1天，1个月等）添加一些工具提示。我找不到解决方法。

任何帮助将不胜感激。谢谢

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

在库存图表（Highstock）中添加用于预配置日期范围的工具提示

1 个答案: