本文介绍了HighCharts:标签在工具提示中可见的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我的图表上的标签显示在工具提示上,看起来不太好。我试图玩 zIndex
,但没有结果。我如何使工具提示不透明?这是我的jsFiddle:
';}},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>
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:
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:标签在工具提示中可见的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!