highcharts 圆环图中心文本与工具提示重叠
highcharts donut chart center text overlaps with tooltip
我在 Highcharts Donut/Pie 图表的中心显示文本。
但我的问题是中心文本与工具提示文本重叠,工具提示变得不可读。
我尝试更改工具提示的 zIndex 以将其置于最前面,但它不起作用。我希望工具提示位于甜甜圈中心文本的顶部。
在此处查看完整图表:http://jsfiddle.net/SufianRashid/88q5uke1
//==================== HIGH CHARTS =========================//
function RenderPieChart(chartId, chartData, donutCenterText) {
$('#' + chartId).highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: 0,
plotShadow: false,
height: 270
},
credits: {
enabled: false
},
exporting: {
enabled: false
},
title: {
text: '',
align: 'center',
verticalAlign: 'middle',
y: 0,
useHTML: true
},
tooltip: {
backgroundColor: 'white',
useHtml: true,
//zIndex: 99, //on top of everything
headerFormat: '',
pointFormat: '{point.actualCounts} {point.name}'
},
plotOptions: {
pie: {
dataLabels: {
formatter: function () { if (this.y != 0) return this.y + '%'; }, //don't show 0% values
enabled: true,
distance: -25, //change this value to show label inside/outside the pie chart (negative means towards inside)
style: {
fontWeight: 'bold',
color: 'white',
textShadow: '0px 1px 2px black'
}
},
//showInLegend: true,
startAngle: 0,
endAngle: 360,
center: ['50%', '50%']
},
//-------- On click open drill down url --------//
series: {
cursor: 'pointer',
point: {
events: {
click: function () {
location.href = this.options.url; //same window
}
}
}
}//End adding link
//--------------------------------//
},
series: [{
type: 'pie',
innerSize: '140px',
//--------------------//
data: chartData
//--------------------//
}]
},
//-------- Show Center Text ------//
function (chart) {
var xpos = chart.plotLeft + (chart.plotWidth * 0.43);
var ypos = chart.plotTop + (chart.plotHeight * 0.4);
// Render the text
chart.innerText = chart.renderer.html(donutCenterText, xpos, ypos).add();
}
); //EOF: HighChart
}
尝试以下将解决您的问题:
CSS:
.highcharts-tooltip span {
background-color:white;
border:1px solid;
opacity:1;
z-index:9999 !important;
}
JQuery:
tooltip: {
borderWidth: 0,
backgroundColor: "rgba(255,255,255,0)",
shadow: false,
useHTML: true,
//zIndex: 99, //on top of everything
headerFormat: '',
pointFormat: '{point.actualCounts} {point.name}'
},
检查:
RenderPieChart(
'PieChartContainer',
[
{ name: 'tickets opened within 24 hrs', y: 76.5, actualCounts: 54, url:'../dummyUrl.html' },
{ name: 'tickets opened within 25 to 48 hrs', y: 6.9, actualCounts: 77, url:'../dummyUrl.html' },
{ name: 'tickets opened in 49 to 72+ hrs', y: 93.1, actualCounts: 1032, url:'../dummyUrl.html' }
],
"<span id='DonutCenterText' style='text-align:center;' class='donutValuesOpen'><span>Total Open <br/>Tickets: <a href='../dummyUrl.html'> 1109 </a> <br/> </span><span class='Avg'>Average Days <br/>Open: 8 </span> </span>"
);
//==================== HIGH CHARTS =========================//
function RenderPieChart(chartId, chartData, donutCenterText) {
$('#' + chartId).highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: 0,
plotShadow: false,
height: 270
},
credits: {
enabled: false
},
exporting: {
enabled: false
},
title: {
text: '',
align: 'center',
verticalAlign: 'middle',
y: 0,
useHTML: true
},
tooltip: {
borderWidth: 0,
backgroundColor: "rgba(255,255,255,0)",
shadow: false,
useHTML: true,
//zIndex: 99, //on top of everything
headerFormat: '',
pointFormat: '{point.actualCounts} {point.name}'
},
plotOptions: {
pie: {
dataLabels: {
formatter: function () { if (this.y != 0) return this.y + '%'; }, //don't show 0% values
enabled: true,
distance: -25, //change this value to show label inside/outside the pie chart (negative means towards inside)
style: {
fontWeight: 'bold',
color: 'white',
textShadow: '0px 1px 2px black'
}
},
//showInLegend: true,
startAngle: 0,
endAngle: 360,
center: ['50%', '50%']
},
//-------- On click open drill down url --------//
series: {
cursor: 'pointer',
point: {
events: {
click: function () {
location.href = this.options.url; //same window
}
}
}
}//End adding link
//--------------------------------//
},
series: [{
type: 'pie',
innerSize: '140px',
//--------------------//
data: chartData
//--------------------//
}]
},
//------- Show Donut center text ------------------//
function (chart) {
var xpos = chart.plotLeft + (chart.plotWidth * 0.43);
var ypos = chart.plotTop + (chart.plotHeight * 0.4);
// Render the text
chart.innerText = chart.renderer.html(donutCenterText, xpos, ypos).add();
}
); //EOF: HighChart
}
.highcharts-tooltip span {
background-color:white;
border:1px solid;
opacity:1;
z-index:9999 !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="PieChartContainer" style="height: 400px"></div>
我在 Highcharts Donut/Pie 图表的中心显示文本。 但我的问题是中心文本与工具提示文本重叠,工具提示变得不可读。
我尝试更改工具提示的 zIndex 以将其置于最前面,但它不起作用。我希望工具提示位于甜甜圈中心文本的顶部。
在此处查看完整图表:http://jsfiddle.net/SufianRashid/88q5uke1
//==================== HIGH CHARTS =========================//
function RenderPieChart(chartId, chartData, donutCenterText) {
$('#' + chartId).highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: 0,
plotShadow: false,
height: 270
},
credits: {
enabled: false
},
exporting: {
enabled: false
},
title: {
text: '',
align: 'center',
verticalAlign: 'middle',
y: 0,
useHTML: true
},
tooltip: {
backgroundColor: 'white',
useHtml: true,
//zIndex: 99, //on top of everything
headerFormat: '',
pointFormat: '{point.actualCounts} {point.name}'
},
plotOptions: {
pie: {
dataLabels: {
formatter: function () { if (this.y != 0) return this.y + '%'; }, //don't show 0% values
enabled: true,
distance: -25, //change this value to show label inside/outside the pie chart (negative means towards inside)
style: {
fontWeight: 'bold',
color: 'white',
textShadow: '0px 1px 2px black'
}
},
//showInLegend: true,
startAngle: 0,
endAngle: 360,
center: ['50%', '50%']
},
//-------- On click open drill down url --------//
series: {
cursor: 'pointer',
point: {
events: {
click: function () {
location.href = this.options.url; //same window
}
}
}
}//End adding link
//--------------------------------//
},
series: [{
type: 'pie',
innerSize: '140px',
//--------------------//
data: chartData
//--------------------//
}]
},
//-------- Show Center Text ------//
function (chart) {
var xpos = chart.plotLeft + (chart.plotWidth * 0.43);
var ypos = chart.plotTop + (chart.plotHeight * 0.4);
// Render the text
chart.innerText = chart.renderer.html(donutCenterText, xpos, ypos).add();
}
); //EOF: HighChart
}
尝试以下将解决您的问题:
CSS:
.highcharts-tooltip span {
background-color:white;
border:1px solid;
opacity:1;
z-index:9999 !important;
}
JQuery:
tooltip: {
borderWidth: 0,
backgroundColor: "rgba(255,255,255,0)",
shadow: false,
useHTML: true,
//zIndex: 99, //on top of everything
headerFormat: '',
pointFormat: '{point.actualCounts} {point.name}'
},
检查:
RenderPieChart(
'PieChartContainer',
[
{ name: 'tickets opened within 24 hrs', y: 76.5, actualCounts: 54, url:'../dummyUrl.html' },
{ name: 'tickets opened within 25 to 48 hrs', y: 6.9, actualCounts: 77, url:'../dummyUrl.html' },
{ name: 'tickets opened in 49 to 72+ hrs', y: 93.1, actualCounts: 1032, url:'../dummyUrl.html' }
],
"<span id='DonutCenterText' style='text-align:center;' class='donutValuesOpen'><span>Total Open <br/>Tickets: <a href='../dummyUrl.html'> 1109 </a> <br/> </span><span class='Avg'>Average Days <br/>Open: 8 </span> </span>"
);
//==================== HIGH CHARTS =========================//
function RenderPieChart(chartId, chartData, donutCenterText) {
$('#' + chartId).highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: 0,
plotShadow: false,
height: 270
},
credits: {
enabled: false
},
exporting: {
enabled: false
},
title: {
text: '',
align: 'center',
verticalAlign: 'middle',
y: 0,
useHTML: true
},
tooltip: {
borderWidth: 0,
backgroundColor: "rgba(255,255,255,0)",
shadow: false,
useHTML: true,
//zIndex: 99, //on top of everything
headerFormat: '',
pointFormat: '{point.actualCounts} {point.name}'
},
plotOptions: {
pie: {
dataLabels: {
formatter: function () { if (this.y != 0) return this.y + '%'; }, //don't show 0% values
enabled: true,
distance: -25, //change this value to show label inside/outside the pie chart (negative means towards inside)
style: {
fontWeight: 'bold',
color: 'white',
textShadow: '0px 1px 2px black'
}
},
//showInLegend: true,
startAngle: 0,
endAngle: 360,
center: ['50%', '50%']
},
//-------- On click open drill down url --------//
series: {
cursor: 'pointer',
point: {
events: {
click: function () {
location.href = this.options.url; //same window
}
}
}
}//End adding link
//--------------------------------//
},
series: [{
type: 'pie',
innerSize: '140px',
//--------------------//
data: chartData
//--------------------//
}]
},
//------- Show Donut center text ------------------//
function (chart) {
var xpos = chart.plotLeft + (chart.plotWidth * 0.43);
var ypos = chart.plotTop + (chart.plotHeight * 0.4);
// Render the text
chart.innerText = chart.renderer.html(donutCenterText, xpos, ypos).add();
}
); //EOF: HighChart
}
.highcharts-tooltip span {
background-color:white;
border:1px solid;
opacity:1;
z-index:9999 !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="PieChartContainer" style="height: 400px"></div>