刪除邊框和內容高圖之間的工具提示空間

我使用highcharts進行遺傳圖形，問題在於，highcharts正在生成邊框和內容之間的空間工具提示並且在生成的空間之間可以看到餅圖的標籤。任何可以解決我的問題。刪除邊框和內容高圖之間的工具提示空間

請檢查下面的例子。

$(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: { 
 
       borderWidth: 1, 
 
       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="tooltop">'+this.point.name + '<br />' + '<b>' + Highcharts.numberFormat(this.y).replace(",", " ") + ' Kč [' + Highcharts.numberFormat(this.percentage, 2) + '%]</b></div>'; 
 
       } 
 
      }, 
 
      plotOptions: { 
 
       pie: { 
 
        allowPointSelect: true, 
 
        cursor: 'pointer', 
 
        dataLabels: { 
 
         zIndex: 1, 
 
         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] 
 
       ] 
 
      }] 
 
     }); 
 
    }); 
 
});

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

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

 
.tooltip { 
 
    padding:5px; 
 
}

<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>

順序和內容highcharts

來源

2015-09-30 Harshad

SVG工具提示元素可以通過隱藏的：

 tooltip: { 
      borderWidth: 0, 
      backgroundColor: "rgba(255,255,255,0)", 
      shadow: false,

實施例：http://jsfiddle.net/x8Lq0yr9/1/

這將消除邊界和HTML內容之間的空間。

來源

2015-09-30 13:15:54

它爲我工作....謝謝:) – Harshad

您使用DIV CLASS = 「tooltop」，其中作爲tooltop類是一無所獲

提示空間。此外，.highcharts-tooltip用於兩個地方的高級圖表。一個在數據可用，另一個在tiiptip。除非你想要特定的邊框顏色，否則你可以從你的代碼中移除該css類，並且tooltip loks很好。

.tooltipSpan {  
opacity:1; 
z-index:9999!important; 
width:100%; 
}

見本Fiddle

來源

2015-09-30 09:20:54

不錯，它工作正常....但我不希望通過工具提示透明背景 – Harshad

刪除邊框和內容高圖之間的工具提示空間

回答

相關問題