7

これが私の問題です。データラベルに useHTML: true を設定すると、ラベルのテキストがツールチップの背景を上書きするようです。

この単純なフィドルで動作を確認できます:棒グラフ

バーの上にマウスを置いてツールチップを表示すると、ツールチップの背景にデータラベルのテキストが表示されます。

データ ラベルに z-index を設定することは可能ですか?

これをツールチップ定義に追加しようとしましたが、成功しませんでした:

style : {
    color: 'black',
    'z-index': 0
    },

また、データ ラベルとツールチップのスパン クラスを設定してから、これらのクラスの css プロパティに z-index を追加しようとしましたが、まだ機能していません。

編集:私はまだ問題の解決策を探しているので、グラフのバー (またはデータラベル) にクラスを追加する方法を教えてもらえますか? 私の目的は、このクラスで特定の onclick イベントを呼び出すことです。

4

3 に答える 3

8

わかりましたので、ここに私の問題の回避策があります...アイデアは、独自のカスタムツールチップを作成することです。

解決策は、Highcharts フォーラムで提供されました: Highcharts フォーラムの投稿

これを行うには、データラベルとツールチップの両方で「useHTML」プロパティを設定し、ツールチップのいくつかのデフォルト プロパティを削除し、フォーマッタ関数で CSS クラスをセットアップします。

//JS
datalabels: {
    ...
    useHTML: true,
    formatter: function() {
        return ("<span class='datalabel'>" + this.y + "</span>");
    }
}

tooltip: {
    ...
    borderWidth:0,
    borderRadius:0,
    shadow:false,
    useHTML: true,
    formatter: function() {
        return ("<div class='tooltip'>" + this.y + "</div>");
    }
}

最後のステップ (最も重要) は、highcharts-tooltip スパン クラス (Highcharts が HTML ツールチップをレンダリングするために使用するクラス) の CSS ルールを設定することです。

//CSS
.highcharts-tooltip span {
    background-color:white;
    z-index:9999!important;  
}

z-index プロパティに注意してください。これは、ツールチップをデータラベル上にレンダリングできるようにするプロパティです。

「tooltip」クラスの CSS ルールを設定することで、ツールチップをカスタマイズできるようになりました。

完全なライブの例については、jsfiddle のカスタム ツールチップを参照してください。

注：このソリューションが機能するためにフォーマッタでデータラベルクラスを指定することは必須ではありません。特定のマウスイベントを登録できるようにする必要があります。

于 2012-12-07T12:00:54.617 に答える
-1

ツールチップの背景色については、http://api.highcharts.com/highcharts#tooltip.backgroundColorを確認してください。

highslideフォーラムでこのプロパティで同じ種類の問題が解決されました

于 2012-12-06T10:33:34.543 に答える