2

我是 highcharts 的新手。默认情况下，Highchart 在图表本身内显示工具提示。这是否可以在图表外部显示工具提示，并与它用于显示内部的位置相同。有帮助吗？

4

4 回答 4

5

您可以定义自己的 div，然后使用工具提示格式化程序在其中显示信息。

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

tooltip: {
        formatter:function(){
            $('#tooltip').html('Point Y: '+this.y);
        }
    },
于 2013-02-06T09:32:45.853 回答
3

是的，您可以使用 Tooltip.positioner 更改它，这里是 API 的链接：http: //api.highcharts.com/highcharts#tooltip

于 2013-02-06T09:29:38.080 回答
0

同时默认工具提示和自定义工具提示

上面是一个示例，您可以同时显示默认工具提示和您自己的自定义工具提示。归功于@Ricardo Lohmann，他在以下帖子中展示了如何创建自定义工具提示：

Highchart - 图例的工具提示

// first of all we've to build a group to put the elements
this.SVGElements = this.chartVar.renderer.g().attr({'zIndex': 11}).add();

// build tooltip text
var textContainer = this.chartVar.renderer.text(text, coord[0], coord[1])
                .attr({
                    'zIndex': 10
                })
                .add(this.SVGElements);

// get text 'box'
var box = textContainer.getBBox();

// build  tooltip square according to the text location, then place the container behind the text
this.chartVar.renderer.rect(box.x - 5, box.y - 5, box.width + 10, box.height + 10, 5)
                .attr({
                    'stroke-width': 2,            // border width
                    'stroke': '#a8a8a8',        // border color
                    'zIndex': 9,
                    'fill': 'white',            // background color
                    'fill-opacity': 0.85,        // background opacity
                    'isShadow': true
                })
                .add(this.SVGElements);
于 2013-02-06T09:44:14.327 回答
0 
tooltip: {
              positioner: function () {
                    return { x: 45, y: 60 };
                }
            }

用这个

于 2015-09-03T12:23:04.440 回答