highcharts - 单个气泡的 Highcharts 命名

Question

新的 Highcharts v3.0 气泡图看起来很棒。是否可以用名称/一些文本注释和显示每个气泡？谢谢，奈杰尔。

Answer 1

您需要做两件事。

首先，命名每个数据点（气泡）：

data: [
  { name: 'Alice', x: 3.5, y: 4, z: 5}, 
  { name: 'Eve', x: 7, y: 7, z: 3}, 
  { name: 'Carol', x: 4, y: 8, z: 6}
]

二、创建数据标签格式化程序：

dataLabels: {
  enabled: true,
  formatter: function() {
    return this.point.name;
  }
}

你可以在这里看到这个：http: //jsfiddle.net/franzo/JuGDp/1/

鲍勃是你的叔叔。

Answer 2

根据您要显示的内容，它应该是可能的。气泡图将允许与任何其他高图相同的选项。最简单的方法是使用 dataLabels http://api.highcharts.com/highcharts#plotOptions.scatter.dataLabels

       dataLabels:{
           enabled:true
       } 

例如http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/plotoptions/series-datalabels-box/

如果这对您来说不够灵活，可以使用底层渲染器http://api.highcharts.com/highcharts#Renderer在图表上绘制您想要的任何内容。这有点难，但是。一旦掌握了窍门，就相当直截了当。

我在这里使用数据标签创建了一个小例子：http: //jsfiddle.net/4nRk6/

可以使用格式化程序函数自定义数据标签，例如：

 dataLabels: {
           enabled: true,
           formatter: function() {
                    return this.y +'mm';
           }
 }  

完整的文档在这里：http ://api.highcharts.com/highcharts#plotOptions.column.dataLabels

如果您想要关于气泡的更多信息，您可能需要按如下方式格式化您的数据系列：

[
    {x:1, y:5, bubbleText:"Bubble 1"},
    {x:2, y:15, bubbleText:"Bubble 2"},
    {x:3, y:5, bubbleText:"Bubble 3"}
]

在 dataLabel 中，您可以引用 this.point.bubbleText 以及 this.x 和 this.y。