highcharts - 個々のバブルのハイチャート命名

Question

新しい Highcharts v3.0 のバブル チャートは見栄えがします。名前/テキストで各バブルに注釈を付けて表示することは可能ですか? ありがとう、ナイジェル。

Answer 1

表示したいものによっては、可能なはずです。バブル チャートでは、他のハイチャートと同じオプションを使用できます。最も簡単な方法は、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 を参照できます。