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。