AngularでChart.jsを使った時の「Failed to create chart: can't acquire context from the given item」に対応する。

• facebook

オフィス狛 技術部のKoma（Twitterアカウントの中の人＆CEO）です。

Chart.jsは、『グラフと言えばChart.js』ぐらいに有名なライブラリです。
Abgularで使用する場合、npm install で簡単に取り込む事が出来ます。

インストールは本家のGitHub、 Angularで使う場合はこちらのサイト
に非常に詳しい説明があります。

さて、上記を参考にいざ使用してみると・・・・

ブラウザのコンソールに
Failed to create chart: can't acquire context from the given item
が出る事が分かりました。
グラフ自体は問題なく動いているんですけどね。

で、色々と試行錯誤した結果、問題ある箇所は、先のサイトで言うところの

<div *ngIf="chart">
  <canvas id="canvas">{{ chart }}</canvas>
</div>

である事が分かりました。これを・・・

<div [hidden]="chart === null">
  <canvas id="canvas">{{ chart }}</canvas>
</div>

多分、

[hidden]="!chart"

でも大丈夫だと思います。（と言うか、上記の方が良いかも）

要は、「*ngIf」を使ってしまうと、falseになった時に、レンダリングされないので、
chart.jsから「id="canvas"」という要素が見つけられないのでしょうね。

ちょっとハマったので、
同じようなエラーが出た方は、上記で回避してください。


Angular , Chartjs