イイダリョウのブログ。Chart.jsをGettingしてStartedする2018-06-15Chart.jsをGettingしてStartedするJSJSで図を描写するライブラリはいくつかありますが、Canvas要素ベースのChart.jsとSVG要素ベースのd3.jsが目につきました。どっちを先にやるか迷いましたが、Three.jsでCanvas要素に触れ始めているので3Dと2Dの比較として触ってみることにしました。クモのようにコツコツとChart.jsの公式サイトまずは、公式サイトに行って見た。Started」とう文字が見える。GettingしてStartedしようじゃないか。StartedページにあるコードをCodePenに貼ってみたい。Chart.jsの本体ファイルを読み込むために「JS」の「Setting(歯車アイコン)をクリック。「Quick-add」の中にはないようなので「Chart.js」で検索。src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></script>さあ、準備完了!さっそくコードを貼ってみよう。コードを貼ってみる実際に貼ってみた。CodePen.おお!?下からニョキっと曲線の折れ線グラフが出てきたぞ!アニメーションになってるのか。id="myChart"></canvas>canvas要素に#myChartってid名が付いてるだけ。CSSはなし!あとは全てJSに書いてあるようだ。{}});コード量、そんなに多くないですね!ちょっと順番に見ていきますか。そのあとにgetContext()メソッドが続いている。これはChart.jsにあらかじめ定義されたメソッドですね。コンテキストは「文脈」みたいな意味のようだが引数2dで2Dオブジェクトだと指定しているようだ。次の行からは一かたまりになっているので、外側からみていきましょう。引数2);まず変数chartにnewでChartオブジェクトをインスタンス化(複製)しています。このChartオブジェクトもChart.jsの中にあらかじめ定義されているものです。中には引数が2つ入っています。クモのようにコツコツと次に引数の中をみていきましょう。値,});まず、第一引数に先ほどの変数ctxが入ります。第二引数には連想配列が続きます。ctxの中の連想配列設定をここで上書きしていくのでしょう。クモのようにコツコツとでは、連想配列をみていきましょう。'line',まず、typeキーの値をlineにしています。上のコメントをGoogle翻訳すると「作成したいチャートのタイプ」とある。線グラフにしたんですね。},連想配列が入れ子になってますねー。上のコメントを訳すと「データセットのデータ」とある。上の親:dateキー。その中に子の連想配列が入っている。子の一つ目:labelsキーで値は配列で月名が入ってますね。子の二つ目:datasetsキーで、その中に孫の連想配列が入っている。これは上にある図のキャプションだ。孫の二つ目:backgroundColorキーで値はRGBの数値。これは線の下部分の赤い背景色ですね。孫の三つ目:borderColorキーで値はRGBの数値。孫の四つ目:dataキーでこれがデータの数値が配列で入っている。次の連想配列を見ましょう。{}コメントを訳すと「設定オプションはこちらになります」。optionsキーですが値は空ですね。波括弧{}なのでここにも連想配列を追加できます。まとめということで全体的には「変数ctcにcanvas要素#myChartを紐づけて、2Dコンテキストにしている。chartインスタンスでctcに月名、キャプション、色、データの数値を反映している。」といった内容が書いてあります。下からニョキっとでてくるモーションについては言及がないので、標準仕様なのかな。無事にChart.jsをGettingしてStartedできたので、次はこの数値をいくつか打ち替えて動きをみようと思います。22:21Tweet関連記事2019-08-14【Vue.js】コンポーネント事始め(グローバル登録とローカル登録)Vue.jsシリーズの続きです。Chartsでスプレッドシートを読み込んでグラフを表示する以前、GoogleChartsをQuickにStartしました。この時は連想配列...2019-05-29【Vue.js】v-bindでclass名を動的に追加、削除する!(北斗の拳の名言編)Vue.jsの続きです。はてなブログProフロントエンドエンジニア。神奈川に住まう四十路のオジキ。DTP→Webデザイナーから転向し今に至る。引き続きコツコツの日々。(24)リンクTwitterInstagramYoutubeCodePenGitHubPinterestQuolaFacebooknoteQiitaはてなブログをはじめよう!idr_zzさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。