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
       } 

e.g。 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。