xaxisデータラベルをバーのハイチャートと同じ色にする

gerryoftrivia

各データラベルXaxisをバーの色と同じ色にするようにしています

それを一致させる方法はありますか?

ここにコードがあります

var colors = ['#76daff','#b9f','#99ffa6','#ffc312'];
xAxis: {
      type: 'category',
      labels: {
        useHTML : true,
        formatter: function () {
             return '<div class="myToolTip" style="color:'+colors+'">'+this.value+'</div>';
        },
      }
    },

完全なコードリンクはこちら

ダニエル

現時点では、完全なcolors配列の表現をスタイル定義に入力しています。これにより、次のようになります。

style="color:#76daff,#b9f,#99ffa6,#ffc312"

これは明らかに望ましい動作ではありません。

ただし、formatter関数はthis、を使用this.valueして正しい値を表示することですでに示したように、を使用てそのコンテキスト(この場合は対応するデータポイント)に関する情報を取得できます。this追加にはthis.pos、現在のデータポイントのインデックスを含むプロパティがあります。(ありがたいことに、すべてのプログラマーが行うように、インデックスは0からカウントを開始します)

したがって、コードを少し調整することで、完全な配列ではなく、現在一致する色を取得できます。

formatter: function () {
  return '<div class="myToolTip" style="color:'+colors[this.pos]+'">'+this.value+'</div>';
}

ただし、別の安全策として、値よりも少ない色が指定された場合のハイチャートの動作を複製することもできます(カラー配列の最後で、モジュロを使用して最初からやり直すだけです)。

formatter: function () {
  return '<div class="myToolTip" style="color:'+colors[this.pos % color.length]+'">'+this.value+'</div>';
}

編集:実際の例を示すためにコードペン更新しましたまた、標準のformatStringを使用して、それに応じて実際の値のスタイルも設定しました。

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してくださいdebugcn@gmail.com

編集
0

コメントを追加

0

関連記事

分類Dev

ハイチャート:棒グラフの同じ線上にデータラベルを配置する

分類Dev

バーの色に応じてハイチャートのツールチップの色を変更する

分類Dev

xAxisがチェックすると、ハイチャートデータラベルが中央に表示されます

分類Dev

ハイチャートで最初と最後のxAxisラベルのみを表示する

分類Dev

ハイチャートに同じxとyの複数のデータを表示する

分類Dev

複数のxAxisおよびyAxisに表示されないハイチャートデータラベル

分類Dev

xAxisのデータ時間が異なる同じチャートに2つの系列を描画する方法

分類Dev

ハイチャートでデータホバーラインの色を変更する

分類Dev

ハイチャーターはホバー時にハイライトの色を変更します

分類Dev

ラベルグリッドラインのハイチャートに色を設定する

分類Dev

ハイチャートの各値の日付としてxAxisラベルをフォーマットする方法は?

分類Dev

他のデータラベルにデータラベルがあるハイチャート領域

分類Dev

ハイチャート角度ゲージ-データラベルのストロークを削除する方法は?

分類Dev

重複する列のハイチャートデータラベル

分類Dev

ハイチャートのゾーンでパターンを指定するときにデフォルトの色を使用する方法

分類Dev

データラベルをオフにするハイチャート円グラフ

分類Dev

ハイチャート:データラベルとして別の変数を使用できますか?

分類Dev

シリーズと xAxis データを含む json を使用したハイチャート バー

分類Dev

ハイチャート-データラベルの秒を時間(H:M:S)に変更します

分類Dev

ハイチャートラベルに画像を追加する

分類Dev

matplotlibとseabornの異なるチャートで同じインデックスに同じ色を設定する方法

分類Dev

ハイチャートを使用してヒートマップのサイズ変更後にデータラベルの位置を更新する

分類Dev

ハイチャート異なるデータ同じチャート

分類Dev

ハイチャートのPieTooltipにデータを追加する

分類Dev

ハイチャートの最初のyAxisラベルを非表示にする

分類Dev

グラフのハイチャートに最初と最後のy軸ラベルのみを表示する

分類Dev

ハイチャートでクリックイベントを実行するときにボットのxAxis値を取得する

分類Dev

TensorflowとKerasの同じ(?)ニューラルネットワークアーキテクチャは、同じデータで異なる精度を生成します

分類Dev

ハイチャートバブルグラフのxaxisでバブル/円がエスケープされる

Related 関連記事

  1. 1

    ハイチャート:棒グラフの同じ線上にデータラベルを配置する

  2. 2

    バーの色に応じてハイチャートのツールチップの色を変更する

  3. 3

    xAxisがチェックすると、ハイチャートデータラベルが中央に表示されます

  4. 4

    ハイチャートで最初と最後のxAxisラベルのみを表示する

  5. 5

    ハイチャートに同じxとyの複数のデータを表示する

  6. 6

    複数のxAxisおよびyAxisに表示されないハイチャートデータラベル

  7. 7

    xAxisのデータ時間が異なる同じチャートに2つの系列を描画する方法

  8. 8

    ハイチャートでデータホバーラインの色を変更する

  9. 9

    ハイチャーターはホバー時にハイライトの色を変更します

  10. 10

    ラベルグリッドラインのハイチャートに色を設定する

  11. 11

    ハイチャートの各値の日付としてxAxisラベルをフォーマットする方法は?

  12. 12

    他のデータラベルにデータラベルがあるハイチャート領域

  13. 13

    ハイチャート角度ゲージ-データラベルのストロークを削除する方法は?

  14. 14

    重複する列のハイチャートデータラベル

  15. 15

    ハイチャートのゾーンでパターンを指定するときにデフォルトの色を使用する方法

  16. 16

    データラベルをオフにするハイチャート円グラフ

  17. 17

    ハイチャート:データラベルとして別の変数を使用できますか?

  18. 18

    シリーズと xAxis データを含む json を使用したハイチャート バー

  19. 19

    ハイチャート-データラベルの秒を時間(H:M:S)に変更します

  20. 20

    ハイチャートラベルに画像を追加する

  21. 21

    matplotlibとseabornの異なるチャートで同じインデックスに同じ色を設定する方法

  22. 22

    ハイチャートを使用してヒートマップのサイズ変更後にデータラベルの位置を更新する

  23. 23

    ハイチャート異なるデータ同じチャート

  24. 24

    ハイチャートのPieTooltipにデータを追加する

  25. 25

    ハイチャートの最初のyAxisラベルを非表示にする

  26. 26

    グラフのハイチャートに最初と最後のy軸ラベルのみを表示する

  27. 27

    ハイチャートでクリックイベントを実行するときにボットのxAxis値を取得する

  28. 28

    TensorflowとKerasの同じ(?)ニューラルネットワークアーキテクチャは、同じデータで異なる精度を生成します

  29. 29

    ハイチャートバブルグラフのxaxisでバブル/円がエスケープされる

ホットタグ

アーカイブ