Question

我正在使用useHTML = true和formatter选项来创建自己的样式化工具提示，并且在顶层也可以。根据需要，可以使用CSS将工具提示放在标签的“顶部”。但是，当我使用向下钻取功能加载详细地图时，这些工具提示不遵循zIndex属性，从而允许下面的标签文本显示出来。此外，在返回顶级地图时，工具提示现在也违反了zIndex，现在基础标签显示出来了。

我在jsfiddle上加载了一个示例：

 $(function () {
     Highcharts.setOptions({ "lang": { "drillUpText": "&lt; Back to main area" } });
     $('#container').highcharts('Map', {
     "title": {
        "text": "Area 51"
     },
     "tooltip": {
        "headerFormat": "",
        "borderWidth": 0,
        "backgroundColor": "rgba(204,204,204,1)",
        "useHTML": true,
        "formatter": function () { return '<div class="fredTT">' + this.point.name + '<br>' + this.point.xdata + '</div>' }
     },
     "legend": {
        "enabled": false
     },
     "series": [
       {
          "id": "UK0",
          "type": "map",
          "dataLabels": {
             "enabled": true,
             "color": "#ffffff",
             "useHTML": true,
             "formatter": function () {return this.point.name}
  },
          "data": [
            {
               "xdata": "Some interesting data",
               "color": "#ffcccc",
               "drilldown": "Area_1",
               "name": "<b>Area 1</b>",
               "path": "M0,-994L204,-994L203,-480,0,-477z"
            },
            {
               "xdata": "Some more interesting data",
               "color": "#ccccff",
               "drilldown": "Area_2",
               "name": "<b>Area 2</b>",
               "path": "M204,-994L455,-994L457,-477,203,-480z"
            }
          ]
       }
     ],
     "drilldown": {
        "series": [
          {
             "id": "Area_1",
             "name": "NE Area 1",
             "type": "map",
             "dataLabels": {
                "enabled": true,
                "color": "#000000",
                "useHTML": true,
                "formatter": function () { return '<b>' + this.point.name + '</b><br>' + this.point.xdata}
             },
             "data": [
                       {
                          "color": "#ffcccc",
                          "name": "Area 1.1",
                          "xdata": "Secret #1",
                          "path": "M4,-992,513,-988L513,-787L2,-786z"
                    },
                       {
                          "color": "#ccffcc",
                          "name": "Area 1.2",
                          "xdata": "Secret #2",
                          "path": "M2,-786,513,-787,515,-538,3,-536z"
                       },
                       {
                          "color": "#ccccff",
                          "name": "Area 1.3",
                          "xdata": "Secret #3",
                          "path": "M3,-536,515,-538,516,-293,0,-294Z"
                       },
                       {
                          "color": "#ffffcc",
                          "name": "Area 1.4",
                          "xdata": "Secret #4",
                          "path": "M0,-294,516,-293,514,8,4,6Z"
                       }
             ]
          },
          {
             "id": "Area_2",
             "name": "Area 2",
             "type": "map",
             "dataLabels": {
                "enabled": true,
                "color": "#000000",
                "useHTML": true,
                "formatter": function () { return '<div class="ddTT"><b>' + this.point.name + '</b></div>'}
             },
             "data": [
                       {
                          "color": "#ffffcc",
                          "name": "Area 2.1",
                          "xdata": "Secret #5",
                          "path": "M4,-992,513,-988L513,-787L2,-786z"
                    },
                       {
                          "color": "#ffcccc",
                          "name": "Area 2.2",
                          "xdata": "Secret #6",
                          "path": "M2,-786,513,-787,515,-538,3,-536z"
                    },
                       {
                          "color": "#ccffcc",
                          "name": "Area 2.3",
                          "xdata": "Secret #7",
                          "path": "M3,-536,515,-538,516,-293,0,-294Z"
                          },
                       {
                          "color": "#ccccff",
                          "name": "Area 2.4",
                          "xdata": "Secret #8",
                          "path": "M0,-294,516,-293,514,8,4,6Z"
                          }
              ]
          }

        ]
     }
  })})

Answer 1

使用tooltip.useHTML时，Highcharts中似乎有一个错误。样式仅在第一次加载时应用，并且工具提示和标签容器的DOM位置被交换。

解决方法：

1.在tooltip.formatter函数中，返回带有某些类的div（就像您一样-fredTT）。
2.禁用工具提示backgrondColor和shadow。
3.添加类似的CSS样式：

.fredTT {
  padding: 7px;
  border-style: none;
  background-color: rgba(255, 255, 255, 1);
  border: 1px solid #c5c5c5;
  border-radius: 5px;
  opacity: 1;
}

.highcharts-tooltip {
  z-index: 7;
}

演示：

https://jsfiddle.net/BlackLabel/yv1fbasj/1/

高图下钻和样式不一致的工具提示？

1 个答案: