Chart.jsをいじってみる

Scripts n StylesというWordPressでゴリゴリJavaScriptを書けるプラグインを入れたので、安易にChart.jsをCDNで使ってみたいと思います。

WordPressの投稿の中でcanvasタグをいれると「ビジュアル←→テキスト」でタグが消えてしまったりするので、JavaScriptでDOMを入れ込むようにしてみました。

Chart.jsの公式のドキュメントのUsageにこんな情報がありました。

To create a chart, we need to instantiate the Chart class. To do this, we need to pass in the node, jQuery instance, or 2d context of the canvas of where we want to draw the chart. Here’s an example.

つまり、ctxオブジェクトの差異をChartクラスが吸収してくれるというわけです。 😎

ただ、サンプルをベタ打ちしておいてなんですが、バーの色がそれぞれ変えることに意味はない上に、利便性が下がるので、スタイルは1つにします。

そして、ラベルとデータの数が揃っていないとエラーになるので、ここは別のメソッドにまとめて設定しておきます。

これだと、ただ表示しているだけなので、今度はボタン押下で表示データの変更を行なうようにします。

なぜ、関数ではなくメソッドにしているのか・・・趣味です。 😆 関数と違って宣言している位置が重要になりますのでお気をつけください。(なぜ関数にしなかったし。 😯 )

ソースを見ての通りappendで挿入していますので、この記事の一番下にサンプルが表示されています。

スポンサーリンク
  • このエントリーをはてなブックマークに追加

水蕗をフォローする

スポンサーリンク

コメントを残す