在气泡图中将图例标记在中心位置。

huangapple go评论161阅读模式
英文:

Marking the legend in center for bubble chart

问题

我正在玩这个高级图表:

https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/packed-bubble-split

在Packed bubble split图表中,我想让图例(亚洲欧洲等)出现在每个气泡的中心。使用events能实现吗?
我尝试了以下代码:

  1. Highcharts.chart(chartContainer, {
  2. chart: {
  3. type: 'packedbubble',
  4. renderTo: chartContainer,
  5. events: {
  6. render: function() {
  7. const chart = this;
  8. chart.series.forEach(function (series) {
  9. var data = series.data; // 获取系列的所有数据点
  10. var totalX = 0;
  11. var totalY = 0;
  12. var totalPoints = data.length;
  13. // 计算数据点的总X和Y坐标
  14. data.forEach(function (point) {
  15. var bubble = point.graphic; // 获取气泡图形
  16. var bubbleX = bubble ? bubble.x : 0; // 获取X坐标
  17. var bubbleY = bubble ? bubble.y : 0;
  18. totalX += bubbleX;
  19. totalY += bubbleY;
  20. });
  21. console.log(series)
  22. // 计算系列的质心(平均X和Y坐标)
  23. var centroidX = totalX / totalPoints;
  24. var centroidY = totalY / totalPoints;
  25. var radius = data[0].marker.radius; // 假设所有点的半径相同
  26. var labelX = centroidX + chart.plotLeft - radius;
  27. var labelY = centroidY + chart.plotTop - radius;
  28. console.log(totalX, labelY)
  29. chart.renderer.label(
  30. series.name,
  31. labelX,
  32. labelY
  33. )
  34. .css({
  35. color: 'black',
  36. fontSize: '12px',
  37. fontWeight: 'bold',
  38. whiteSpace: 'nowrap', // 防止文本换行
  39. padding: '5px', // 在标签文本周围添加一些内边距
  40. backgroundColor: 'rgba(255, 255, 255, 0.7)', // 添加半透明背景
  41. borderRadius: '5px' // 添加圆角背景
  42. })
  43. .add();
  44. });
  45. }
  46. }
  47. },

但是没有成功,我无法将它们放在中心位置。想知道是否有其他方法可以实现?

英文:

I'm playing around this highchart:

https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/packed-bubble-split

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:

  1. Highcharts.chart(chartContainer, {
  2. chart: {
  3. type: 'packedbubble',
  4. renderTo: chartContainer,
  5. events: {
  6. render: function() {
  7. const chart = this;
  8. chart.series.forEach(function (series) {
  9. var data = series.data; // Get all the data points for the series
  10. var totalX = 0;
  11. var totalY = 0;
  12. var totalPoints = data.length;
  13. // Calculate the total X and Y coordinates of the data points
  14. data.forEach(function (point) {
  15. var bubble = point.graphic; // Get the bubble graphic
  16. var bubbleX = bubble ? bubble.x : 0; // Get the X coordinate
  17. var bubbleY = bubble ? bubble.y : 0;
  18. totalX += bubbleX;
  19. totalY += bubbleY;
  20. });
  21. console.log(series)
  22. // Calculate the centroid (average X and Y) for the series
  23. var centroidX = totalX / totalPoints;
  24. var centroidY = totalY / totalPoints;
  25. var radius = data[0].marker.radius; // Assuming all points have the same radius
  26. var labelX = centroidX + chart.plotLeft - radius;
  27. var labelY = centroidY + chart.plotTop - radius;
  28. console.log(totalX, labelY)
  29. chart.renderer.label(
  30. series.name,
  31. labelX,
  32. labelY
  33. )
  34. .css({
  35. color: 'black',
  36. fontSize: '12px',
  37. fontWeight: 'bold',
  38. whiteSpace: 'nowrap', // To prevent text wrapping
  39. padding: '5px', // Add some padding around the label text
  40. backgroundColor: 'rgba(255, 255, 255, 0.7)', // Add a semi-transparent background
  41. borderRadius: '5px' // Add rounded corners to the background
  42. })
  43. .add();
  44. });
  45. }
  46. }
  47. },

No luck, I can't place them in center. Wondering if there is a way I achieve it?

答案1

得分: 1

你可以使用下面的插件,在动画期间添加所需的自定义标签并定位它。

  1. (function(H) {
  2. H.addEvent(H.Series, 'afterDrawDataLabels', function(e) {
  3. const series = this;
  4. const chart = series.chart;
  5. if (!series.parentNode.plotX) {
  6. return;
  7. }
  8. if (!series.customLabel) {
  9. series.customLabel = series.chart.renderer.label(
  10. series.name
  11. )
  12. .attr({...})
  13. .css({...})
  14. .add();
  15. }
  16. series.customLabel.attr({
  17. x: series.parentNode.plotX + chart.plotLeft,
  18. y: series.parentNode.plotY + chart.plotTop - 10
  19. });
  20. });
  21. }(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.

  1. (function(H) {
  2. H.addEvent(H.Series, 'afterDrawDataLabels', function(e) {
  3. const series = this;
  4. const chart = series.chart;
  5. if (!series.parentNode.plotX) {
  6. return;
  7. }
  8. if (!series.customLabel) {
  9. series.customLabel = series.chart.renderer.label(
  10. series.name
  11. )
  12. .attr({...})
  13. .css({...})
  14. .add();
  15. }
  16. series.customLabel.attr({
  17. x: series.parentNode.plotX + chart.plotLeft,
  18. y: series.parentNode.plotY + chart.plotTop - 10
  19. });
  20. });
  21. }(Highcharts));

Live demo: https://jsfiddle.net/BlackLabel/v1ew6bLc/

Docs: https://www.highcharts.com/docs/extending-highcharts/extending-highcharts

huangapple
  • 本文由 发表于 2023年8月9日 04:33:03
  • 转载请务必保留本文链接:https://go.coder-hub.com/76863033.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定