HighCharts：标签在工具提示中可见 [英] HighCharts: Labels visible over tooltip

问题描述

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

';}}，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个;< /跨度>';系列：[{type：'pie'，name：'Potřeba'，data：[['Firefox'，45.0]，['IE'，26.8]，{name：'Chrome'，y：12.8 ，切片：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 =graf1style =width：400px; height：250px; float：left>< / div>

.highcharts.com / highcharts＃series< pie> .dataLabels.useHTMLrel =noreferrer> useHTML 并通过css定义您自己的工具提示：

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

tooltip：{
borderWidth：0，
backgroundColor ：rgba（255,255,255,0），
borderRadius：0，
shadow：false，
useHTML：true，
percentageDecimals：2，
backgroundColor：rgba （255,25 5,255,1），
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纯绿色;
opacity：1;
z-index：9999！重要;
}

.tooltip {
padding：5px;
}


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>

解决方案

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,
    backgroundColor: "rgba(255,255,255,1)",
    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;
}

这篇关于HighCharts：标签在工具提示中可见的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！