我图表上的标签显示在工具提示上,看起来不太好。我试着玩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>
8条答案
按热度按时间yacmzcpb1#
您可以设置
useHTML
并通过css定义自己的工具提示:http://jsfiddle.net/4scfH/4/
中央支助系统
说明:当您将
useHTML
设置为true时,它将工具提示文本显示为HTML层上的HTML,但仍然在highcharts中为框和箭头绘制SVG形状。而是数据标签顶部的工具提示文本本身。上面的配置选项有效地隐藏了SVG工具提示的形状,并且完全用HTML/CSS来构建和样式化工具提示。唯一的缺点是你失去了小“箭头”指针。lstz6jyr2#
如果你将tooltip.backgroundColor设置为“rgba(255,255,255,1)”,你会得到“无透明度”的工具提示
您必须删除useHTML:在饼图设置中为true。
jsfidle的分叉:http://jsfiddle.net/kairs/Z3UZ8/1/
highchart上的文档
8nuwlpux3#
我遇到了同样的问题。标签在工具提示上可见。删除标签的useHTML=true对我很有效。
brc7rcf04#
我有同样的问题。我的解决方案。工具提示-useHTML = true。工具提示-格式化程序= HTML代码有一个div容器。这里的负值边距在css中很重要。
CSS:
ogq8wdun5#
如果你不想回避useHTML中存在的问题,下面是在svg中解决的方法:
lhcgjxsq6#
对于html格式的Highchart工具提示
highcharts 配置
CSS:
tv6aics17#
我仍然对周围的一些解决方案有问题,设置z索引:999 on .tooltip没有任何效果,因为有各种各样的容器div。但是,我发现设置这个效果很好(当图例和tooltip是HTML时)。也不需要设置其他z索引:
第一个月
20jt8wwn8#
将工具提示外部属性设置为true。
outside : true