◀︎STUDY JavaScript_013-1 折れ線グラフ / CSS:transform:rotate()
1
-----
-----
-----
-----
折れ線グラフに必要な CSS
- エリア
- バー
- グラフ_01 〜 グラフ_06
- ライン_01 〜 ライン_05
- ポイント_01 〜 ポイント_06
- データ_01 〜 データ_06
▼ Download: ■ sample_JS_013-ABCD
HTML に記述する内容
- <div class="エリア">
- <div class="バー グラフ_01"> 〜 <div class="バー グラフ_06">
- <hr class="ライン_01"> 〜 <hr class="ライン_05">
- <div class="ポイント_01"> 〜 <div class="ポイント_06">
- <span class="データ_01">1月 〜 <span class="データ_01">6月
サンプル - 1
6つの <div> タグと CSS だけで棒グラフを作成する(RGBカラー).
サンプル - 2
カラーを RGB から RGBA(透明0.5) に置き換えて, グラフのトップのポイントをラインで繋ぐ(<hr> ダグによる 2px solid red の線).
サンプル - 3
それぞれのグラフ・トップに 6px 6px のポイント(円)を作成する.
サンプル - 4
グラフに 1月 〜 6月 までのデータを追加する.
折れ線=function()
- function t(t,e)
- function e(e,i,a,n,r,s)
- function i(e,i,a,n,r,s,o)
- function a(t,e,i)
- function n(t,e)
- function s(t)
- function o(t,e)
- function l(t)
- function c(t)
- function h(t)
line_graph_chart_01.js
- data= labels:["1月","2月","3月","4月","5月","6月"]
- datasets: color:"red",values:[40,20,80,60,100,30]
1
-----
-----
-----
-----
◀︎Contents STUDY JavaScript_013-1
