英文:
Marking the legend in center for bubble chart
问题
我正在玩这个高级图表：
在Packed bubble split图表中，我想让图例（亚洲，欧洲等）出现在每个气泡的中心。使用events能实现吗？
我尝试了以下代码：
Highcharts.chart(chartContainer, {
chart: {
type: 'packedbubble',
renderTo: chartContainer,
events: {
render: function() {
const chart = this;
chart.series.forEach(function (series) {
var data = series.data; // 获取系列的所有数据点
var totalX = 0;
var totalY = 0;
var totalPoints = data.length;
// 计算数据点的总X和Y坐标
data.forEach(function (point) {
var bubble = point.graphic; // 获取气泡图形
var bubbleX = bubble ? bubble.x : 0; // 获取X坐标
var bubbleY = bubble ? bubble.y : 0;
totalX += bubbleX;
totalY += bubbleY;
});
console.log(series)
// 计算系列的质心（平均X和Y坐标）
var centroidX = totalX / totalPoints;
var centroidY = totalY / totalPoints;
var radius = data[0].marker.radius; // 假设所有点的半径相同
var labelX = centroidX + chart.plotLeft - radius;
var labelY = centroidY + chart.plotTop - radius;
console.log(totalX, labelY)
chart.renderer.label(
series.name,
labelX,
labelY
)
.css({
color: 'black',
fontSize: '12px',
fontWeight: 'bold',
whiteSpace: 'nowrap', // 防止文本换行
padding: '5px', // 在标签文本周围添加一些内边距
backgroundColor: 'rgba(255, 255, 255, 0.7)', // 添加半透明背景
borderRadius: '5px' // 添加圆角背景
})
.add();
});
}
}
},
但是没有成功，我无法将它们放在中心位置。想知道是否有其他方法可以实现？
英文:
I'm playing around this highchart:
Packed bubble split, I wanted to make the legends (Asia, Europe etc) to appear in the center of each bubble. Is it possible with events?
I tried something like this:
Highcharts.chart(chartContainer, {
chart: {
type: 'packedbubble',
renderTo: chartContainer,
events: {
render: function() {
const chart = this;
chart.series.forEach(function (series) {
var data = series.data; // Get all the data points for the series
var totalX = 0;
var totalY = 0;
var totalPoints = data.length;
// Calculate the total X and Y coordinates of the data points
data.forEach(function (point) {
var bubble = point.graphic; // Get the bubble graphic
var bubbleX = bubble ? bubble.x : 0; // Get the X coordinate
var bubbleY = bubble ? bubble.y : 0;
totalX += bubbleX;
totalY += bubbleY;
});
console.log(series)
// Calculate the centroid (average X and Y) for the series
var centroidX = totalX / totalPoints;
var centroidY = totalY / totalPoints;
var radius = data[0].marker.radius; // Assuming all points have the same radius
var labelX = centroidX + chart.plotLeft - radius;
var labelY = centroidY + chart.plotTop - radius;
console.log(totalX, labelY)
chart.renderer.label(
series.name,
labelX,
labelY
)
.css({
color: 'black',
fontSize: '12px',
fontWeight: 'bold',
whiteSpace: 'nowrap', // To prevent text wrapping
padding: '5px', // Add some padding around the label text
backgroundColor: 'rgba(255, 255, 255, 0.7)', // Add a semi-transparent background
borderRadius: '5px' // Add rounded corners to the background
})
.add();
});
}
}
},
No luck, I can't place them in center. Wondering if there is a way I achieve it?
答案1
得分: 1
你可以使用下面的插件，在动画期间添加所需的自定义标签并定位它。
(function(H) {
H.addEvent(H.Series, 'afterDrawDataLabels', function(e) {
const series = this;
const chart = series.chart;
if (!series.parentNode.plotX) {
return;
}
if (!series.customLabel) {
series.customLabel = series.chart.renderer.label(
series.name
)
.attr({...})
.css({...})
.add();
}
series.customLabel.attr({
x: series.parentNode.plotX + chart.plotLeft,
y: series.parentNode.plotY + chart.plotTop - 10
});
});
}(Highcharts));
在线演示： https://jsfiddle.net/BlackLabel/v1ew6bLc/
文档： https://www.highcharts.com/docs/extending-highcharts/extending-highcharts
英文:
You can use the below plugin which will add the required custom label and position it during animation.
(function(H) {
H.addEvent(H.Series, 'afterDrawDataLabels', function(e) {
const series = this;
const chart = series.chart;
if (!series.parentNode.plotX) {
return;
}
if (!series.customLabel) {
series.customLabel = series.chart.renderer.label(
series.name
)
.attr({...})
.css({...})
.add();
}
series.customLabel.attr({
x: series.parentNode.plotX + chart.plotLeft,
y: series.parentNode.plotY + chart.plotTop - 10
});
});
}(Highcharts));
Live demo: https://jsfiddle.net/BlackLabel/v1ew6bLc/
Docs: https://www.highcharts.com/docs/extending-highcharts/extending-highcharts
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论