HighCharts:在工具提示上可见的标签
HighCharts:在工具提示上可见的标签
提问于 2013-02-28 15:57:44
我的图表上的标签显示在工具提示上，这看起来不是很好。我试着玩zIndex，但是没有结果。如何使工具提示不透明？这是我的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>
回答 7
Stack Overflow用户
回答已采纳
发布于 2013-02-28 18:00:36
您可以通过css设置useHTML并定义自己的工具提示：
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，但仍会在highcharts中为框和箭头绘制一个SVG形状。您最终会看到数据标签看起来像是在工具提示上绘制的，但工具提示文本本身在数据标签上。上面的配置选项有效地隐藏了SVG工具提示形状，并完全使用HTML/CSS构建工具提示并设置其样式。唯一的缺点是你丢失了小的“箭头”指针。
Stack Overflow用户
发布于 2014-01-08 20:01:37
如果您将tooltip.backgroundColor设置为"rgba(255,255,255,1)“，您将得到”无透明度“的工具提示。
您必须删除饼图设置中的useHTML: true。
jsfiddle的分支：http://jsfiddle.net/kairs/Z3UZ8/1/
tooltip: {
backgroundColor: "rgba(255,255,255,1)"
}Documentation on highchart
Stack Overflow用户
发布于 2016-06-16 19:51:34
我也有同样的问题。标签在工具提示上方可见。删除标签的useHTML=true对我来说很有效。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/15130311
复制相关文章
相似问题
腾讯云开发者
