我使用的是HighChart库的饼图。在饼的悬停上,中间的文本与工具提示重叠。有什么办法解决这个问题吗?
链接到stackblitz https://stackblitz.com/edit/pie-chart-using-highcharts-er7kym?file=app%2Fhighcharts.service.ts
发布于 2022-02-08 09:15:33
设置中有些地方出错了,我从演示中创建了一个类似的图表,这里的文本不再与工具提示重叠。
Highcharts.chart('container', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: 0,
plotShadow: false
},
title: {
text: 'Browser<br>shares<br>2017',
align: 'center',
verticalAlign: 'middle',
y: 60
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
showInLegend: true,
cursor: 'pointer',
innerSize: '50%',
dataLabels: {
enabled: false,
format: '<b><a (click)="helloFunc(point.name)">{point.name}</a></b>: {point.percentage:.1f} %bbb',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) ||
'black',
},
},
states: {
hover: {
brightness: 0,
halo: {
opacity: 1,
},
},
select: {
brightness: 0,
halo: {
opacity: 1,
},
},
},
point: {
events: {
mouseOver: function() {
let chart = this.series.chart;
chart.title.attr({
text: `<span style="color:#e43761;" class="dealer-title" data-oa-qa="donut-total-count-text">Total<br/><b>${this.y}</b></span>`,
});
},
click: function() {
let chart = this.series.chart;
chart.title.attr({
text: `<span style="color:#e43761;" class="dealer-title" data-oa-qa="donut-total-count-text">Total<br/><b>${this.y}</b></span>`,
});
},
legendItemClick: function() {
let chart = this.series.chart;
chart.title.attr({
text: `<span style="color:#e43761;" class="dealer-title" data-oa-qa="donut-total-count-text">Total<br/><b>${this.y}</b></span>`,
});
return false;
},
},
},
},
},
series: [{
type: 'pie',
name: 'Browser share',
innerSize: '50%',
data: [
['Chrome', 58.9],
['Firefox', 13.29],
['Internet Explorer', 13],
['Edge', 3.78],
['Safari', 3.42],
{
name: 'Other',
y: 7.61,
dataLabels: {
enabled: false
}
}
]
}]
});
在角中重新创建的示例:演示
发布于 2022-02-15 06:53:37
在做了一些研究后得到了答案。只需要使useHTML成为假的。this.series.chart.setTitle({ text: span,useHTML: false });
链接到https://stackblitz.com/edit/highcharts-angular-basic-line-buzwdr?file=src%2Fapp%2Fapp.component.ts小提琴
https://stackoverflow.com/questions/71030388
复制相似问题