[Highcharts]グラフタイトルなどに下付き文字が使えない時の対処法

javascriptで綺麗なグラフを描画できるライブラリ、Highcharts。
とても便利なのですが、多機能すぎて何が出来るのか調べるのも一苦労。
今回は、グラフタイトルやTooltipに下付き文字を付けたい時の対処法です。

グラフタイトルにはsubが使えない！？そんな時の対処法

Highcharts公式サイト（英語）

下付き文字とは、「CO₂」で言うところの「2」にあたります。他の文字よりも小さくなっている文字です。
通常HTMLでは で囲むのですが、Highchartsではが効かない模様。
どうしてもテキストサイズを小さくしたい場合には、少々力業ですが、spanを使って文字サイズを小さくすることができます。
Highcharts公式（英語）のでもページに丁度良いサンプルがあったのでご紹介します。

Browser market shares. January, 2015 to May, 2015　｜Highcharts Demo

上記ページにアクセスすると、右側にグラフ、左側にソースが表示されています。
随分長いコードですが、注目して欲しいのは34行目のTooltipの箇所。

tooltip: {
        headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
        pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
    },

「span style=”font-size:11px」としてフォントサイズを指定しています。
この方法で、タイトルの文字サイズも小さくすることができます。
例えば「CO₂test」というタイトルを用意します。
タイトルに を使っても反映されません。

   title: {
        text: 'CO<sub>2</sub>test'
    },

ここにTooltipの例を参考にspanでフォントサイズを指定します。

title: {
        text: 'CO<span style="font-size:11px">2</span>test'
    },

単純に文字サイズを小さくしただけなので、厳密にはsubとは違うのですが、見た目上近づける事はできました！

Highcharts関連記事沢山あります。

その他、カスタマイズ記事沢山るのでご参考までに！

グラフタイトルにはsubが使えない！？そんな時の対処法

Highcharts関連記事沢山あります。

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル