3

ええと...ハイチャートバブルチャートの各バブルにカスタムテキストを表示する方法は知っていますが、バブルの上または外側に追加のテキストを表示することは可能ですか (下の画像のようなもの)?

バブルにカスタム テキストを表示する方法を知る必要がある場合は、チャート オプションに必要なオプションを次に示します: (完全なコードを表示)

        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つのラベルしか持てません。

しかし、次の 2 つのオプションがあります。

  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、およびチャートの寸法によって異なります)、またはハイチャートから値を取得する方法を見つけます。(やり方を教えてください! ;-)

それが役立つことを願っています。

于 2013-09-12T07:19:23.133 に答える