HighchartsでHTML特殊文字を文字として表示する方法

FuelPHP+Highchartsでアニメ作品の公式Twitterアカウントのフォローワー数をグラフ化するサイトを作っています。
http://akibalab.info/animefollower

![スクリーンショット 2015-05-23 17.00.26.png](https://qiita-image-store.s3.amazonaws.com/0/36931/10f5a776-8f50-48ab-a7ff-15c0e5e1a7c6.png)



よく見るといくつかの文字がHTML参照文字（HTML実体参照）になっています。


![スクリーンショット 2015-05-23 17.20.29.png](https://qiita-image-store.s3.amazonaws.com/0/36931/59860a15-e5ab-3972-2fa3-302a035863ae.png)

![スクリーンショット 2015-05-23 17.23.53.png](https://qiita-image-store.s3.amazonaws.com/0/36931/e0aeac20-4682-3504-2998-99a5d163fe71.png)

|望むべき表示|画面にでてる文字|
|------------|---------------|
|東京喰種√A|東京喰種&amp;radic;A|
|デュラララ!!×2|デュラララ!!&amp;times;2|


## 実体参照文字にしてる犯人はFuelPHP

FuelPHPのHTMLレンダリングView::forgeメソッドがHTML特殊文字をエスケープしているため。
エスケープされた文字は実体参照文字に変換される。（コード参照ではないことに注意）

``
forge($file = null, $data = null, $filter = null)
``
http://fuelphp.jp/docs/1.8/classes/view.html


実態参照文字とコード参照文字の違いについては以下がわかりやすい
http://e-words.jp/p/r-htmlentity.html

View::forgeの第3引数にfalseを指定すればもちろん文字参照でなく文字として表示されるが、それではタグ文字（<や>）がきた時に画面がぶっ壊れるので根本解決にはならない。（ユーザーが入力したデータを表示しないならそれでもいいが。。）


## 実態参照文字を文字として表示できない根本原因はHighcharts

本来、FuelPHPが実態参照文字にエスケープしてもHTMLブラウザが文字に変換してくれるはずなのですがなぜかこんな表示になってしまいます。

![スクリーンショット 2015-05-23 17.20.29.png](https://qiita-image-store.s3.amazonaws.com/0/36931/59860a15-e5ab-3972-2fa3-302a035863ae.png)

### Highchartsは描写をSVGで実行している


HighchartsのマニュアルやHighchartsが実際に描画するHTMLソースを見ると、HighchartsはグラフをSVGでレンダリングしてるのがわかります。

文字化け？している東京グールの実際のHTMLソースは以下のようになっています


```
<g class="highcharts-legend-item" zIndex="1" transform="translate(8,48)"><text x="21" y="15" style="color:#333333;font-size:12px;font-weight:bold;cursor:pointer;fill:#333333;" text-anchor="start" zIndex="2">東京喰種トーキョーグール&amp;radic;A</text><rect x="0" y="4" width="16" height="12" zIndex="3" fill="#f15c80"></rect></g>
```

gタグはSVGタグです。


この場合、&amp;radic;は√に変換されずそのまま描写されてしまいます。



### Highchartsの一部の描写をSVGからHTMLに切り替えることで特殊文字を表示できる

特殊文字を描写するために用意されたかは不明ですがHighchartsにはuseHTMLオプションというのが存在し一部のレンダリングをSVGからHTMLに切り替えられるようになっています。
Highchartsのダウンロードサイトでもオプションとして存在しています。
（http://www.highcharts.com/download）
Features->Html


### 実際にHTMLに切り替えて文字参照を文字に直す

#### 凡例部分

##### 直す前のJSソースコード部分(SVG描写)

```
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'middle',
                borderWidth: 0,
                reversed: true
            },
```

![スクリーンショット 2015-05-23 17.20.29.png](https://qiita-image-store.s3.amazonaws.com/0/36931/59860a15-e5ab-3972-2fa3-302a035863ae.png)


##### 直した後のJSソースコード部分（HTML描写）

```
            legend: {
                useHTML: true,//追加！
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'middle',
                borderWidth: 0,
                reversed: true
            },
```
![スクリーンショット 2015-05-23 17.53.45.png](https://qiita-image-store.s3.amazonaws.com/0/36931/39888fdb-e443-e1d1-4767-21d67646534a.png)


HTMLで見るとgタグからdivタグに変わっています
```
<div class="highcharts-legend-item" style="position: absolute; left: 8px; top: 57px;"><span style="position: absolute; white-space: nowrap; font-family: 'Lucida Grande', 'Lucida Sans Unicode', Arial, Helvetica, sans-serif; font-size: 12px; color: rgb(51, 51, 51); font-weight: bold; cursor: pointer; margin-left: 0px; margin-top: 0px; left: 21px; top: 2px; fill: rgb(51, 51, 51);" zindex="2">東京喰種トーキョーグール√A</span></div>
```


#### tooltips部分




##### 直す前のJSソースコード部分(SVG描写)

```
            tooltip: {
                valueSuffix: 'フォロワー'
            },
```

![スクリーンショット 2015-05-23 17.23.53.png](https://qiita-image-store.s3.amazonaws.com/0/36931/e0aeac20-4682-3504-2998-99a5d163fe71.png)


##### 直した後のJSソースコード部分（HTML描写）


```
            tooltip: {
                useHTML: true,//追加
                valueSuffix: 'フォロワー'
            },
```



![スクリーンショット 2015-05-23 18.04.05.png](https://qiita-image-store.s3.amazonaws.com/0/36931/ed469799-5971-76ab-353e-cc99f2a165d4.png)


##まとめ

SVGからHTMLに変換すると特殊文字は表示できるようになりますが、完全にレイアウトが一致するわけでわない（微妙にレイアウトがずれる）ので、描写を切り替えたあと画面のチェックはちゃんとしましょう。