TIPSコメントを書くWebページで折れ線グラフや棒グラフを表現する方法を調べてみたら「Chart.js」を使った非常に簡単な実装方法があったのでご紹介します。「Chart.js」を活用する際にはライブラリを読み込む必要があります。今回はCDN経由でライブラリを読み込んで使ってみます。実際の実装イメージとしてはこんな感じになります。処理//--></script>上記のスクリプト内の処理を変えることで、棒グラフや折れ線グラフ等を表示していきます。棒グラフを表現する際は下記のようなプログラムになります。※以降のプログラムはライブラリが読み込み済みであることを想定して記載します。グラフの最大値}}]}}});//--></script>実際のグラフは下記のようになります。グラフのスタイルを調整したい場合は、datasets内の項目の数値を変更することで調整ができます。折れ線グラフを表現する際は下記のようなプログラムになります。線グラフのベジェ曲線を無効にする}}}});//--></script>実際のグラフは下記のようになります。棒グラフと同じように、グラフのスタイルを調整したい場合はdatasets内の項目の数値を変更することで調整ができます。棒グラフと折れ線グラフを合わせたグラフを表示する際には、棒グラフのデータに折れ線グラフのデータを追加して表示します。具体的には、下記のようなプログラムになります。線グラフのベジェ曲線を無効にする}}}});//--></script>実際のグラフは下記のようになります。最初に紹介した棒グラフや折れ線グラフのプログラムとの違いは下記二点になります。1datasetsの項目にグラフごとのデータを指定する2グラフのタイプと異なるタイプのグラフを入力する場合は別途指定する最初に指定したグラフのタイプが棒グラフ(‘bar’)の場合は、datasetsで指定したデータも全て棒グラフとして表示されます。個別に別のタイプを指定する事で、違う種類のグラフを混ぜる事ができます。このように、「Chart.js」を使うことで簡単にグラフの表現ができてしまいます。今回使用した「Chart.js」はサンプルコードも多いので、カスタマイズする際には他のサイトも参考にしてみてください!カスタマイズの基本的なことに関しては、下記サイト様で詳しく紹介されていますので、参考にして下さい。日本語ドキュメントではまた!この記事であなたの課題を解決することができましたか?疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。裕介Webサイト制作の際に活用するJavaScript、PHP等のプログラム関係を担当しています。過去にはC、C++、C#等を活用したソフトウェア開発も行っていました。Mashup」で表示するGoogleMapのピン(旗)のアイコンを好きな画像に変更する方法2017.01.26youtube再生後の関連動画を消す方法と埋め込みコードはこれだ!2015.01.13【Excel関数】標準偏差の求め方STDEV.S関数2015.02.14Photoshopでクリアな印象に仕上げるフォトレタッチ術2019.01.11WordPressでよく使うプラグイン紹介!カスタム投稿(出力編)2019.03.05WordPress5.0で追加された「Gutenberg」の投稿画面(エディタ)使い方【レイアウト編】2018.12.17WordPressの見た目が変わった?投稿画面(エディタ)はどうやって使えばいいの?WordPress5.0で追加された「Gutenberg」とは。)この記事へのコメントはありません。この記事へのトラックバックはありません。URL返信をキャンセルする。地域密着型塗装店トーシンリフォーム様のチラシを制作させていただきました。Animateを利用したアニメーションを作ってみる。超初心者なのでプログラミング学習のProgeteをやってみました。相模原小・中学生プログラミングコンテスト開催致しました!2017-6-28読んでみようかな?と思うのは手書きチラシ!一友ビルドテック様のチラシを制作させていただきました。ホームページ制作、WEBマーケティングページ上部へ戻る。