![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgegnL3uaSoXfZyHD0VukNU1mzJOg6A_uo_RBPNhAAiNYPNmHa32O0VSYO03izNPLfHeSKn-ZuBXlY9LGfz5wTNEKcpTod4iSp1UxFow4NdRX2gOxxdWhBSQSCssg4k-I3vorLb2zMSJuwC/s320/Fotolia_107330960_XS.jpg)
オフィス狛 技術部のKoma(Twitterアカウントの中の人&CEO)です。
Chart.jsは、『グラフと言えばChart.js』ぐらいに有名なライブラリです。
Abgularで使用する場合、npm install で簡単に取り込む事が出来ます。
インストールは本家のGitHub、 Angularで使う場合はこちらのサイト
に非常に詳しい説明があります。
さて、上記を参考にいざ使用してみると・・・・
ブラウザのコンソールに
Failed to create chart: can't acquire context from the given item
が出る事が分かりました。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRd0cIuPiBw0MTmuSj3MPCmioHRjHLK9NKBFR58GTb4vHFlgwJEUW4ZaEsewI8VOk7g1X9tIlLlmUZndkIqSaU216OcccvAYHR9AFDvHWfzePUEJMxmBcb34lfsIRFP6t8RPHjMrBPpfLG/s400/chartjs_error.png)
で、色々と試行錯誤した結果、問題ある箇所は、先のサイトで言うところの
<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
0 件のコメント:
コメントを投稿