chartify.js:table要素をグラフ化表示できるJs
- 2019.07.30
- JavaScript jQuery
- chartify.js, table, グラフ

tableタグの要素(td、th等)をグラフ化します。
円・棒・帯グラフ等にできるっぽい。
1.CSSの記述例
以下は任意でです。
<style type="text/css"> <!-- body{ margin:0; padding:0; } h1{ font-size:16px; font-weight:normal; line-height:2.0em; text-align:center; padding:15px 0; } #idWrap{ width:700px; margin:0 auto; text-align:center; } --> </style>
2.ヘッダーとJavaScriptの記述例
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> <script type="text/javascript" src="chartify.js"></script> <script type="text/javascript"> $(function() { //グラフ化するtableのid名を指定 $('#idGraph').chartify( 'pie', { //pie(円グラフ)、bar(棒グラフ) pieChartRotation: -1.256/2, //回転 showLegend: false, //説明の表示 colors: ["ffffff", "ff66ff"] //色 }); }); </script>
3.HTMLの記述例
<table id="idGraph"> <thead> <tr> <td></td> <th>少ない方</th> <th>多い方</th> </tr> </thead> <tbody> <tr> <th>金額</th> <td>1.256</td> <td>5.027</td> </tr> </tbody> </table>
chartify.js:table要素をグラフ化表示するデモページ
ソース元:Chartify – A Visualization Plugin for jQuery
エクセルでやることはあっても、Jsでやることは今までまだ無いです。
-
前の記事
reflection.js:画像を反射させ半透明の影を表示できるJs 2019.07.29
-
次の記事
exdate.jsを使ってDateオブジェクトの日時をフォーマット表示 2019.07.31