htmlとCSSを使った棒グラフ・javascriptライブラリを使った棒グラフ

htmlとCSSを使った棒グラフ・javascriptライブラリを使った棒グラフ

htmlとCSSを使った棒グラフ・javascriptライブラリを使った棒グラフ

本記事ではhtmlとCSSのみで作る帯グラフ(棒グラフ)、javasciptライブラリを使った棒グラフの実装方法を紹介します。

HTMLとCSSでの手作りも良いのですが、ライブラリが豊富にあるのでそちらを使った方が簡単に実装できます。

最近のライブラリであれば、レスポンシブルデザインに対応している事もメリットです。

HTMLとCSSで作る棒グラフ

まずは基本形としてHTML/CSSを使って、簡単な棒グラフを作ってみましょう。

グラフの骨組みとなるHTML/CSSでオーソドックスなのは、リスト要素を利用して必要な分だけ表示する事ですね。

例えば3本の棒グラフを描画する場合の、HTMLとCSSの記述例をご紹介します。

HTMLソース

<ul class="graph"> <li> <div class="bar"></div> <p>国語</p> </li> <li> <div class="bar"></div> <p>算数</p> </li> <li> <div class="bar"></div> <p>英語</p> </li> </ul>

CSS

ul.graph li { display: inline-block; width: 150px; text-align: center; } .bar1{ width: 40px; height: 50px; margin: 0 auto; background-color: #cc0000; } .bar2{ width: 40px; height: 40px; margin: 0 auto; background-color: #66cc00; } .bar3{ width: 40px; height: 70px; margin: 0 auto; background-color: #0033ff; }

liに対しinline-block;を設定する事で、帯を横並びにできる様にしています。

さらに中のbarに縦横の幅と色を設定して、帯データとして利用します。

barは種類分だけ設定し、それぞれ高さを変更(幅は共通)させる事で、数値差を表現しています。

実現例

  • 国語(50点)

  • 算数(40点)

  • 英語(70点)

横方向のグラフも同様

こういったグラフは横方向でも簡単に実現できます。

縦の場合は、inline-block;を解除すればリストが縦に並んでくれます。

barのwidthで数値の変化をつけて、heightは固定にする事になりますね。

応用編:3Dの棒グラフ

では次にHTMLとCSSのみで作る、立体的な円柱を表現した棒グラフをご紹介します。

HTMLソース

<!-- css bar graph --> <div class="css_bar_graph"> <!-- y_axis labels --> <ul class="y_axis"> <li>100%</li> <li>80%</li> <li>60%</li> <li>40%</li> <li>20%</li> <li>0%</li> </ul> <!-- x_axis labels --> <ul class="x_axis"> <li>A社</li> <li>B社</li> <li>C社</li> <li>D社</li> <li>E社</li> </ul> <!-- graph --> <div class="graph"> <!-- grid --> <ul class="grid"> <li><!-- 100 --></li> <li><!-- 80 --></li> <li><!-- 60 --></li> <li><!-- 40 --></li> <li><!-- 20 --></li> <li class="bottom"><!-- 0 --></li> </ul> <!-- bars --> <ul> <li class="bar nr_1 blue" style="height: 125px;"><div class="top"></div><div class="bottom"></div><span>50%</span></li> <li class="bar nr_2 orange" style="height: 225px;"><div class="top"></div><div class="bottom"></div><span>90%</span></li> <li class="bar nr_3 blue" style="height: 75px;"><div class="top"></div><div class="bottom"></div><span>30%</span></li> <li class="bar nr_4 blue" style="height: 100px;"><div class="top"></div><div class="bottom"></div><span>40%</span></li> <li class="bar nr_5 blue" style="height: 150px;"><div class="top"></div><div class="bottom"></div><span>60%</span></li> </ul> </div>

まずはul.y_axisで縦方向の単位を表現します。そして横方向の単位をul.x_axisで表現しています。

次にul.gridの各リストで、横に並ぶ20%ごとの目盛り線を表現しています。

最後にデータの帯を表示します。高さを直接指定して帯の高さを変えています。

立体的な円柱を表現

間に入っている.topと.bottomで円柱の上と下の楕円形を表現する事で、円柱の帯を表現しています。

上部の楕円は薄く、下部のは濃くする事で立体感を出しています(各カラーごとに準備しています)。

最後にspanで、帯の上に浮いた数値(%)を表現しています。

CSS

<link rel="stylesheet" type="text/css" href="styles/graph.css">

スタイルシートダウンロード

上記CSS内に必要なスタイルが全て入っています。詳細はダウンロードして確認してください。

中身の、/* ====== BAR GRAPH ====== */から下が対象コードです。

graph.css 色は青とオレンジ以外にも用意されています。

実現例

  • 100%
  • 80%
  • 60%
  • 40%
  • 20%
  • 0%
  • A社
  • B社
  • C社
  • D社
  • E社
  • 50%
  • 90%
  • 30%
  • 40%
  • 60%

カスタマイズ時の注意

表全体の大きさを変えるカスタマイズをする場合、Y軸の目盛りと帯データが合わなくなる事に注意しましょう。

Y軸の目盛り間隔は、grid部分(div.css_bar_graph div.graph li)のheightで表現しています。

現在の間隔は49pxになっています。

表を大きくすると高さも変更する可能性が高いので、以下のバランスに注意をしましょう。

・グラフの土台(.css_bar_graph)の高さを上げる
・gridの間隔(heightの数値)を上げる
・上記に応じて帯に直接設置した高さを調節する

レスポンシブルデザインへの対応

スマホの場合は逆に表の幅が狭くなるので、帯の幅や間隔、X軸の目盛りの幅などをメディアクエリで調整する必要があります。

javascriptライブラリを使ったグラフ実装例(chart.js)

ではここからは、javascriptのライブラリを利用した帯グラフの実装例をご紹介します。

「chart.js」という有名なjavascriptライブラリを使用します。

htmlソース

<canvas id="myBarChart"></canvas>

今回は上記の様にcanvasを使ってグラフを表現します。

CanvasとはHTML5から新しく追加された図形を描くための技術仕様で、HTMLのcanvas要素とJavaScriptを組み合わせて図形を描画できるものです。

javascriptによる描画部分をライブラリが補ってくれます(ライブラリはchart.js以外にも多数)。

javascript(chart.js)読込・htmlソース

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script> <script> var ctx = document.getElementById("myBarChart"); var myBarChart = new Chart(ctx, { type: 'bar', data: { labels: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'], datasets: [ { label: 'Aサイト 訪問数', data: [620, 650, 930, 850, 510, 606, 470], backgroundColor: "rgba(219,39,91,0.5)" },{ label: 'Bサイト 訪問数', data: [550, 450, 730, 750, 410, 450, 580], backgroundColor: "rgba(130,201,169,0.5)" },{ label: 'Cサイト 訪問数', data: [330, 450, 620, 550, 310, 405, 380], backgroundColor: "rgba(255,183,76,0.5)" } ] }, options: { title: { display: true, text: '月別 3サイト訪問者数' }, scales: { yAxes: [{ ticks: { suggestedMax: 100, suggestedMin: 0, stepSize: 10, callback: function(value, index, values){ return value + '人' } } }] }, } }); </script>

ライブラリの読込

まずは最上段でchart.jsライブラリを読み込んでいます。

直接ダウンロードするのではなく、cdnjs.cloudflare.comのデータを直接読み込んでいます。

javascriptによるデータ構成

まずは横軸方向の帯の名称(A~G案)を設定します。

次に各月ごとの数値を列(1~7月分)でセットします。ひと月ごとに3サイト表示が必要なので、3種類のセットが必要になります。

Y軸の目盛りはoptionのscaleで設定

グラフは基本的に、縦軸方向の名称・単位は表示されません。

ですのでこのY軸の目盛りはoptionのscaleか、js内で処理・設定する必要があります。

ここではscaleで出力データに応じて0~1000まで100単位ずつ目盛りを付け、単位は「人」にしています。

chart.js実現例

帯にカーソルを合わせると、自動でデータが表示される様になっています。

chart.jsは非常に簡単便利なライブラリで、レスポンシブルデザインにも対応しています。

javascriptライブラリを使ったグラフ実装例(apexcharts)

最後にもう一つライブラリを使った実装例をご紹介します。apexchartsライブラリです。

htmlソース

<div id="chart"></div>

先ほどと同じ形で、上記をグラフを設置する位置に記述します。

javascript(apexcharts)読込・htmlソース

<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script> <script> var options = { series: [{ name: '商品A', data: [440, 550, 410, 670, 220, 430] }, { name: '商品B', data: [130, 230, 200, 80, 130, 270] }, { name: '商品C', data: [110, 170, 150, 150, 210, 140] }, { name: '商品D', data: [210, 70, 250, 130, 220, 80] }], chart: { type: 'bar', height: 350, stacked: true, toolbar: { show: false }, zoom: { enabled: true } }, responsive: [{ breakpoint: 480, options: { legend: { position: 'bottom', offsetX: -10, offsetY: 0 } } }], plotOptions: { bar: { horizontal: false, }, }, xaxis: { type: 'datetime', categories: ['2015', '2016', '2017', '2018', '2019', '2020' ], }, legend: { position: 'right', offsetY: 40 }, fill: { opacity: 1 } }; var chart = new ApexCharts(document.querySelector("#chart"), options); chart.render(); </script>

ライブラリの読込

まずは最上段でapexchartsライブラリを読み込んでいます。

前と同様に直接ダウンロードするのではなく、cdn.jsdelivr.netのデータを直接読み込んでいます。

javascriptによるデータ構成

今回は商品ごとの数値が縦に積みあがったタイプです。

X軸の単位(カテゴリ)はoptionのscaleで設定され、Y軸は帯の数値によってapexchartsにより自動算出されています。

レスポンシブルデザイン向けに480pxの画面枠になったら可変するようになっています。

apexcharts実現例

商品の追加

サンプルは商品A~Dまでの4種ですが、3種や5種も自在です。

3種にするときは対象箇所を削ればいいし、追加をする場合は対象位置の間に追記します。

} <-- ここから --> , { name: '商品名', data: [000, 000, 000, 000, 00, 000] } <-- ここまで --> ] //ここがseries: [の閉じかっこにあたります。

年度(カテゴリ)を増やす場合はそれぞれのdata:内列数を一つ追加して、年度も増やせばOKです。

apexchartsデモサンプル

apexchartsには非常にたくさんの種類のグラフサンプルが用意されていますので、ぜひ参考にされて下さい。

https://apexcharts.com/javascript-chart-demos/

chart.jsの時もそうですが、jsライブラリを外部から読み込んでいるためjsのカスタマイズはできません。

apexchartsの様に種類が豊富であれば、目的に応じて最適なものを選べるので助かりますね。

まとめ

以上htmlとCSS、javascriptを使ったグラフの作り方を紹介しました。

仕組みを知る上では一から作る事も大切ですが、今はjavasciptライブラリが豊富にありますので、それを利用するのが確実でしょう。

現在はレスポンシブルデザインが主流ですので、スマホ版に対応するライブラリを利用しましょう。

この記事をシェアする

一押し人気コーナー紹介

HTMLカテゴリの関連記事