商品レビューゲーム食レポお問い合わせホームプログラミングJavaScriptChart.jsで複合グラフを表示する方法!【折れ線と棒グラフを表示】JavaScriptTwitterFacebookはてブPocketLINEコピー2022.03.30Chart.jsを使用して、折れ線と棒グラフを一緒に表示して、複合グラフを作成する方法を書いています。Chartという表記で、こちらに記載があります。動作を確認するChart.jsを使用して、複合グラフを作成するChart.jsはグラフをJavaScriptで描画するためのライブラリです。下記2つの記事のグラフ表示を1つにして表示します。棒グラフの記事はこちらに記載しました。使うための準備についてもこちらに記載しています。今回はChart.jsを使用して、棒グラフを書いてみます。Chart.jsは現時点での最新版のバージョン3.7.1を使用しています。Chart.jsを使用して、棒グラフを書くChart.jsはグラフをJavaScriptで描画するためのライ...codelikes.com2022.03.07折れ線グラフの記事はこちらに記載しました。今回はChart.jsを使用して、折れ線グラフを書いてみます。Chart.jsは現時点での最新版のバージョン3.7.1を使用しています。実装を変えていって、最終的に下記のような折れ線グラフを作成します。Chart.jsを使用して、折...codelikes.com2022.03.21それでは次項でサンプルを見てみましょう。複合グラフのサンプルコードCDNでChart.jsを読み込んで、複合グラフを作成してみます。実際に表示されるグラフは下記のような形になります。今回は、福岡県の2021年の平均気温と降水量のデータを元に複合グラフを作成してみました。</body></html>window.onloadで画面の読み込み時に、チャートを作るようにしました。Chart.jsの読み込みからcanvasへの適用、各プロパティについては先ほどの棒グラフの方の記事に書いているので、ご確認ください。dataプロパティ配下の解説dataプロパティの配下のdatasetsに表示するチャートデータを用意しています。"temperatureChart",}]ひとつ目が棒グラフのデータで、ふたつ目が折れ線グラフのデータです。それぞれにtypeを設定して、グラフの種類を決定しています。typeを’bar’にすると棒グラフになり、’line’だと折れ線グラフになります。棒グラフの方にはlabelプロパティに”降水量”を、折れ線グラフの方には”気温”を設定しています。これが下記の赤枠のグラフ上部のラベル名や、グラフにマウスオーバーした時に表示されるラベルになります。dataプロパティは、実際にグラフとして表示されるデータをX軸の左から書いています。backgroundColorは背景色で、borderColorは枠の色です。今回はRGBで指定していますが、カラーコードでも指定が可能です。RGBで指定すると今回のように透過することができます。yAxisIDはグラフに紐づくIDになります。ここで設定した”rainChart”と”temperatureChart”のIDをoptionsプロパティで使用します。2つのグラフの目盛の位置を決めるために、このようにIDを振っています。dataプロパティ配下のlabelsはX軸に表示される下の方のラベルです。実際に画面でいうと、下記の箇所になります。optionsプロパティ配下の解説optionsプロパティ配下は下記のように設定しました。},}responsiveはfalseを設定することで、グラフがcanvasのサイズに合わせた大きさになります。pluginsの箇所には、グラフのタイトルが表示されるように設定しました。このようにtitleプロパティを設定すると、グラフ上部にtextに書いた文字列が表示されます。'福岡2021年の平均気温と降水量',},scalesには、グラフの目盛の設定を行っています。ここで、先ほどdataプロパティに設定したyAxisIDを使用しています。"right",}“rainChart”が棒グラフで、目盛を左に表示するようにpositionプロパティを”left”に設定しています。“temperatureChart”が折れ線グラフで、目盛を右に表示するように”right”を設定しています。動作を確認する実際にグラフを動かしてみると、下記のようになります。マウスをホバーすると、それぞれの値の詳細が確認できます。右が気温の目盛になっていて、左側が降水量の目盛になっていることが確認できました。Railsの学習におすすめの本を5つ紹介しています。Railsについて簡単に説明して、その後におすすめの本を紹介しました。Railsを「どの本で学ぶのが良いか」の考察をまとめていますので...PythonPythonの学習におすすめの本5選【現役エンジニア選定】Pythonの学習におすすめの本を選定してみました。最初にPythonについて簡単に説明して、その後にそれぞれの本をレビューしました。最後にどの本が良いかの考察をまとめています。けを分け...html&cssHTML/CSSの学習におすすめの本3選!【エンジニア選定】HTML/CSSの学習におすすめの本を3つ紹介しています。最初にHTML/CSSについて簡単に説明して、その後におすすめの本を紹介しました。最後にHTML/CSSを「どの本で学ぶのが良いか」の考察をまとめています。※本についてはAm...PythonPythonのリストに要素を追加する3つの方法!Pythonのリストに要素を追加する方法について書いています。リストに要素を追加するには、下記のメソッドを使います。・appendメソッド・insertメソッド・extendメソッド載せているコードはPythonのバージョン3.10.5で確...Python【Python入門】比較演算子について!サンプルコード6つ!Pythonの比較演算子をまとめてみました。最初にそれぞれの比較演算子について解説して、最後に全ての比較演算子を表にまとめています。載せているソースコードはPythonのバージョン3.11.0で確認しました。公式のこちらに値の比較についての...LaravelLaravelのバリデーションで使える標準ルール11選!Laravelのバリデーションで使える標準のルールで、よく使っているルールの11個について解説しています。ここに上げているバリデーション以外の詳細は、公式のこちらに書いているので確認してみてください。RouterでページのURLごとに、データを渡す方法について書いています。利用シーンとしては、ページ毎にタイトルを設定したり、パンくずのデータを渡すときなどになるかと思います。載せているサンプルコードについては、下記で確認しています...PHPPHPでファイルの存在を確認する2つの方法!(is_file)PHPで「指定したパスのファイル」が存在しているか確認する方法について書いています。下記の2つの関数を使って、ファイルパスが存在するか確認することができます。コメントをキャンセルメールアドレスが公開されることはありません。名前メールサイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。Δプロフィールyasuaki福岡でフリーランスをやってます。業界歴13年になりました、SESで働くことがほとんどです。なんでもやってますが、Webが得意です。このブログではプログラミング技術の内容を中心に、たまに商品レビューとかを書いています。動作を確認するVue.jsの学習におすすめの本を選定!【現役エンジニアが選定】Vue.jsの学習におすすめの本4選!今回はVue.jsの学習におすすめな本を4つ紹介しています。学習に本が必要かも考えてみたので確認してみてください。Vue.jsの学習に本が必要?Vue.jsはJavaScriptでWebアプリケーションのフロントエンドを開発するときに使われ...codelikes.com2022.10.23JavaScriptの学習におすすめの本を選定!【現役エンジニアが選定】JavaScriptの学習におすすめの本5選JavaScriptの学習におすすめの本を選定してみました。最初にJavaScriptはどんなものかと、学習に本が必要かを考えて書いてみました。商品レビューゲーム食レポお問い合わせホーム検索トップサイドバータイトルとURLをコピーしました。