我有一个打包的气泡图,这里是jsfiddle:https://jsfiddle.net/ytvcjzx1/
代码如下:
(function(H) {
H.addEvent(H.Series, 'afterDrawDataLabels', function(e) {
const series = this;
const chart = series.chart;
if (!series.parentNode.plotX || chart.options.chart.type !== 'packedbubble') {
return;
}
if (!series.customLabel) {
series.customLabel = series.chart.renderer.label(
series.name, null, null, 'rect'
)
.attr({
align: 'center',
fill: 'rgba(255, 255, 255, 0.7)',
zIndex: 3
})
.css({
color: 'black',
fontSize: '12px',
fontWeight: 'bold',
whiteSpace: 'nowrap', // To prevent text wrapping
padding: '5px', // Add some padding around the label text
borderRadius: '5px' // Add rounded corners to the background
})
.add();
}
series.customLabel.attr({
x: series.parentNode.plotX + chart.plotLeft,
y: series.parentNode.plotY + chart.plotTop - 10
});
});
}(Highcharts));
Highcharts.chart('container', {
chart: {
type: 'packedbubble',
height: '100%'
},
title: {
text: 'Carbon emissions around the world (2014)',
align: 'left'
},
tooltip: {
useHTML: true,
pointFormat: '<b>{point.name}:</b> {point.value}m CO<sub>2</sub>'
},
plotOptions: {
packedbubble: {
minSize: '20%',
maxSize: '100%',
zMin: 0,
zMax: 1000,
layoutAlgorithm: {
gravitationalConstant: 0.05,
splitSeries: true,
seriesInteraction: false,
dragBetweenSeries: true,
parentNodeLimit: true
},
dataLabels: {
enabled: true,
format: '{point.name}',
filter: {
property: 'y',
operator: '>',
value: 250
},
style: {
color: 'black',
textOutline: 'none',
fontWeight: 'normal'
}
}
}
},
series: [{
name: 'Europe',
data: [{
name: 'Germany',
value: 767.1
}, {
name: 'Croatia',
value: 20.7
},
{
name: 'Belgium',
value: 97.2
},
{
name: 'Czech Republic',
value: 111.7
},
{
name: 'Netherlands',
value: 158.1
},
{
name: 'Spain',
value: 241.6
},
{
name: 'Ukraine',
value: 249.1
},
{
name: 'Poland',
value: 298.1
},
{
name: 'France',
value: 323.7
},
{
name: 'Romania',
value: 78.3
},
{
name: 'United Kingdom',
value: 415.4
}, {
name: 'Turkey',
value: 353.2
}, {
name: 'Italy',
value: 337.6
},
{
name: 'Greece',
value: 71.1
},
{
name: 'Austria',
value: 69.8
},
{
name: 'Belarus',
value: 67.7
},
{
name: 'Serbia',
value: 59.3
},
{
name: 'Finland',
value: 54.8
},
{
name: 'Bulgaria',
value: 51.2
},
{
name: 'Portugal',
value: 48.3
},
{
name: 'Norway',
value: 44.4
},
{
name: 'Sweden',
value: 44.3
},
{
name: 'Hungary',
value: 43.7
},
{
name: 'Switzerland',
value: 40.2
},
{
name: 'Denmark',
value: 40
},
{
name: 'Slovakia',
value: 34.7
},
{
name: 'Ireland',
value: 34.6
},
{
name: 'Croatia',
value: 20.7
},
{
name: 'Estonia',
value: 19.4
},
{
name: 'Slovenia',
value: 16.7
},
{
name: 'Lithuania',
value: 12.3
},
{
name: 'Luxembourg',
value: 10.4
},
{
name: 'Macedonia',
value: 9.5
},
{
name: 'Moldova',
value: 7.8
},
{
name: 'Latvia',
value: 7.5
},
{
name: 'Cyprus',
value: 7.2
}
]
}, {
name: 'Long word 1234432222 1234432222 1234432222 1234432222 1234432222',
data: [{
name: 'Senegal',
value: 8.2
},
{
name: 'Cameroon',
value: 9.2
},
{
name: 'Zimbabwe',
value: 13.1
},
{
name: 'Ghana',
value: 14.1
},
{
name: 'Kenya',
value: 14.1
},
{
name: 'Sudan',
value: 17.3
},
{
name: 'Tunisia',
value: 24.3
},
{
name: 'Angola',
value: 25
},
{
name: 'Libya',
value: 50.6
},
{
name: 'Ivory Coast',
value: 7.3
},
{
name: 'Morocco',
value: 60.7
},
{
name: 'Ethiopia',
value: 8.9
},
{
name: 'United Republic of Tanzania',
value: 9.1
},
{
name: 'Nigeria',
value: 93.9
},
{
name: 'South Africa',
value: 392.7
}, {
name: 'Egypt',
value: 225.1
}, {
name: 'Algeria',
value: 141.5
}
]
}
]
});
您会注意到系列名称Long word 1234432222 1234432222 1234432222 1234432222 1234432222
远远超出了气泡。我们是否可以启用文本溢出并确保所有系列名称仅显示在气泡内(例如添加省略号...
),例如文本可以是Long word 1234432222...
,以便用户可以通过工具提示悬停并找到其完整版本?可以通过CSS吗?
1条答案
按热度按时间jv4diomz1#
要使自定义标 checkout 现在气泡内,您可以尝试对渲染标签进行以下修改:
这增加了
textOverflow: 'ellipsis', width: series.parentNode.graphic.width
。参见this initial JSFiddle demonstration或this JSFiddle demonstration,它有一些填充和处理窗口填充。