3

嗯...我知道如何在 highcharts 气泡图中的每个气泡上显示自定义文本，但是是否可以在气泡上方或外部显示其他文本（如下图所示）？

对于那些需要知道如何在气泡上显示自定义文本的人，这里是图表选项的必需选项：（查看完整代码）

        plotOptions: {
        series: {
            dataLabels: {
                enabled: true,
                useHTML:true,
                formatter:function(){
                    return "<span style='position:relative;top:-10px;'>"+this.y + "$</span>";
                }
            }
        }

样本

4

2 回答 2

4

无论如何，我找到了解决方案。我使用this.point.shapeArgs.r来获取格式化程序函数中每个气泡的半径。这是功能：

formatter:function(){
                    return "<div class='labeltext'><span style='position :relative;top:-"+this.point.shapeArgs.r+"px;display:block'>Group #</span><span style='position:relative;top:-10px;text-align:center;'>"+this.y+"$</span></div>";
                }

完整更新的示例在这里

更新 解决“数据标签被裁剪”的问题，看看这个更新版本

于 2013-09-12T07:17:41.690 回答
0

据我从文档 http://api.highcharts.com/highcharts#plotOptions.bubble.dataLabels中可以看出， 每个值只能有一个标签。

但我看到两个选择：

  1. 使用渲染器http://api.highcharts.com/highcharts#Renderer添加文本

  2. 使用变通方法设置标签文本的一部分的位置

      formatter:function(){
                return "<span>"+this.y + "$</span> <span style='position:relative;top:-"+this.point.z/3)+"px;'>FOO "+this.point.z+"</span>";
            },

见http://jsfiddle.net/t7yYn/5/

和

this.point.z

你得到了你的泡沫的价值。

在飞行中我没有找到缩放。您可以通过反复试验找到值（取决于气泡的 minSize、maxSize 和图表尺寸），或者您找出如何从 highchart 中获取它。（让我知道该怎么做！;-)

希望有帮助。

于 2013-09-12T07:19:23.133 回答