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

ギャグ

Highchartを描画し、画像とテキストをスライスに配置しようとしています。しかし、どういうわけかSVG画像が表示されていません。

以下はフィドルのリンクです

フィドルリンク

Seriesオブジェクトに画像を表示するために使用しているコードの一部は次のとおりです。

formatter : function(){
            return '<svg class="icon">
                    <circle cx="10" cy="10" r="10" fill="red"  /></svg> 7 
                    %'  ; 
},
fny

Highchartのデフォルトのレンダリングでは、テキストのみをレンダリングするSVGテキストノードが使用されます。ラベルでHTMLを使用するように強制する必要があります。

dataLabels:{
    useHTML: true,
    formatter : function(){
         return '<svg class="icon"><circle cx="10" cy="10" r="10" fill="red"  /></svg> 7 %'  ; 
    },
}

これによりかなり風変わりなレンダリングが発生するため、それに応じてCSSを調整する必要があることに注意してください。

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

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

ハイチャート折れ線グラフの最後にラベルを追加する方法

分類Dev

ハイチャートのタイトルとサブタイトルに画像を追加する方法

分類Dev

ハイチャートのロードイベントでラベルを追加する方法

分類Dev

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

分類Dev

ハイチャートのx軸ラベルにツールチップを追加するにはどうすればよいですか?

分類Dev

Googleチャートにラベルを追加する

分類Dev

ハイチャートトラッカーを画像から非表示にする

分類Dev

ハイチャート:1つのカスタムラベルをyAxisに追加します

分類Dev

ハイチャート円グラフホバーに複数のタイトルを追加する

分類Dev

特定のデータセットを使用してハイチャートの x 軸ラベルの下に y 軸の値を追加する方法

分類Dev

ハイチャートのタイトルに境界線を追加する方法

分類Dev

ハイチャートバーの線とラベルを追加するにはどうすればよいですか?

分類Dev

ハイチャート:グラフに線を追加すると、X軸からラベルが削除されます

分類Dev

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

分類Dev

ハイチャート:円グラフの中央にテキストラベルを配置する方法

分類Dev

ハイチャート-欠落しているラベルを変換する

分類Dev

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

分類Dev

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

分類Dev

ハイチャートをペルシア語の画像に変換する

分類Dev

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

分類Dev

ハイチャート:グラフ領域の横にテキストパネルを追加する方法

分類Dev

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

分類Dev

ハイチャートラベルのhtmlを編集するにはどうすればよいですか?

分類Dev

ハイチャートを使用してラベルにカテゴリの合計を表示する方法

分類Dev

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

分類Dev

ハイチャートX軸にデータを追加する

分類Dev

グーグルチャートにポイントのラベルを追加する

分類Dev

ハイチャートのバブル間に直線を追加する方法

分類Dev

ハイチャートバーはデータラベルをパーセントにフォーマットし、テキストを追加します

Related 関連記事

  1. 1

    ハイチャート折れ線グラフの最後にラベルを追加する方法

  2. 2

    ハイチャートのタイトルとサブタイトルに画像を追加する方法

  3. 3

    ハイチャートのロードイベントでラベルを追加する方法

  4. 4

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

  5. 5

    ハイチャートのx軸ラベルにツールチップを追加するにはどうすればよいですか?

  6. 6

    Googleチャートにラベルを追加する

  7. 7

    ハイチャートトラッカーを画像から非表示にする

  8. 8

    ハイチャート:1つのカスタムラベルをyAxisに追加します

  9. 9

    ハイチャート円グラフホバーに複数のタイトルを追加する

  10. 10

    特定のデータセットを使用してハイチャートの x 軸ラベルの下に y 軸の値を追加する方法

  11. 11

    ハイチャートのタイトルに境界線を追加する方法

  12. 12

    ハイチャートバーの線とラベルを追加するにはどうすればよいですか?

  13. 13

    ハイチャート:グラフに線を追加すると、X軸からラベルが削除されます

  14. 14

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

  15. 15

    ハイチャート:円グラフの中央にテキストラベルを配置する方法

  16. 16

    ハイチャート-欠落しているラベルを変換する

  17. 17

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

  18. 18

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

  19. 19

    ハイチャートをペルシア語の画像に変換する

  20. 20

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

  21. 21

    ハイチャート:グラフ領域の横にテキストパネルを追加する方法

  22. 22

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

  23. 23

    ハイチャートラベルのhtmlを編集するにはどうすればよいですか?

  24. 24

    ハイチャートを使用してラベルにカテゴリの合計を表示する方法

  25. 25

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

  26. 26

    ハイチャートX軸にデータを追加する

  27. 27

    グーグルチャートにポイントのラベルを追加する

  28. 28

    ハイチャートのバブル間に直線を追加する方法

  29. 29

    ハイチャートバーはデータラベルをパーセントにフォーマットし、テキストを追加します

ホットタグ

アーカイブ