HighCharts:工具提示上可见的标签

HighCharts: Labels visible over tooltip(HighCharts:工具提示上可见的标签)

问题描述

我图表上的标签显示在工具提示上方，看起来不太好.我尝试使用 zIndex，但没有结果.如何使工具提示不透明?这是我的 jsFiddle:http://www.jsfiddle.net/4scfH/3/

Labels on my chart are showing over tooltip, which doesn't look very nice. I tried to play with zIndex, but to no result. How can I make tooltips not transparent? Here's my jsFiddle: http://www.jsfiddle.net/4scfH/3/

$(function() {
  var chart;
  $(document).ready(function() {
    chart = new Highcharts.Chart({
      chart: {
        renderTo: 'graf1',
        plotBackgroundColor: null,
        plotBorderWidth: null,
        plotShadow: false
      },

      title: {
        margin: 40,
        text: 'Podíl všech potřeb'
      },
      tooltip: {
        //pointFormat: '<b>{point.y} Kč [{point.percentage}%]</b>',
        percentageDecimals: 2,
        backgroundColor: "rgba(255,255,255,1)",
        formatter: function() {
          return this.point.name + '<br />' + '<b>' + Highcharts.numberFormat(this.y).replace(",", " ") + ' Kč [' + Highcharts.numberFormat(this.percentage, 2) + '%]</b>';
        }
      },
      plotOptions: {
        pie: {
          allowPointSelect: true,
          cursor: 'pointer',
          dataLabels: {
            enabled: true,
            color: '#000000',
            connectorWidth: 2,
            useHTML: true,
            formatter: function() {
              return '<span style="color:' + this.point.color + '"><b>' + this.point.name + '</b></span>';
            }
          }
        }
      },
      series: [{
        type: 'pie',
        name: 'Potřeba',
        data: [
          ['Firefox', 45.0],
          ['IE', 26.8], {
            name: 'Chrome',
            y: 12.8,
            sliced: true,
            selected: true
          },
          ['Safari', 8.5],
          ['Opera', 6.2],
          ['Others', 0.7]
        ]
      }]
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="graf1" style="width: 400px; height: 250px; float:left"></div>

推荐答案

你可以设置useHTML 并通过 css 定义自己的工具提示:

You can set useHTML and define your own tooltip via css:

http://jsfiddle.net/4scfH/4/

tooltip: {
    borderWidth: 0,
    backgroundColor: "rgba(255,255,255,0)",
    borderRadius: 0,
    shadow: false,
    useHTML: true,
    percentageDecimals: 2,
    formatter: function () {
        return '<div class="tooltip">' + this.point.name + '<br />' + '<b>' + Highcharts.numberFormat(this.y).replace(",", " ") + ' Kč [' + Highcharts.numberFormat(this.percentage, 2) + '%]</b></div>';
    }
},

CSS

.label {
    z-index: 1 !important;
}

.highcharts-tooltip span {
    background-color: white;
    border:1 px solid green;
    opacity: 1;
    z-index: 9999 !important;
}

.tooltip {
    padding: 5px;
}

说明:当您将 useHTML 设置为 true 时，它​​会在 HTML 层上将工具提示文本显示为 HTML，但仍会在高图显示 SVG 中为框和箭头绘制 SVG 形状.您最终会得到看起来像是绘制在工具提示之上的数据标签，但工具提示文本本身位于数据标签之上.上面的配置选项有效地隐藏了 SVG 工具提示的形状，并纯粹使用 HTML/CSS 构建和设置工具提示的样式.唯一的缺点是您丢失了小箭头"指针.

Explanation: when you set useHTML to true, it displays the tooltip text as HTML on the HTML layer, but still draws an SVG shape in the highcharts display SVG for the box and arrow. You would end up with data labels looking like they were drawn on top of the tooltip, but the tooltip text itself on top of the data labels. The config options above effectively hide the SVG tooltip shape and build and style the tooltip purely with HTML/CSS. The only down-side is that you lose the little "arrow" pointer.

这篇关于HighCharts:工具提示上可见的标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！