2016/01/13
animationなグラフが描けるChartist.js使ってみました
SVGに対応していて、responsiveなグラフが描けるChartist.jsというものを使ってみました。
準備
headerの中に、
|
1 2 | <link rel="stylesheet" href="http://cdn.jsdelivr.net/chartist.js/latest/chartist.min.css"> <script src="http://cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script> |
を加えるか、bowerの
|
1 | bower install chartist --save |
でインストールし、適切な場所に設置する。
デモ
シンプルな線形チャート
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <div class="ct-chart ct-perfect-fourth graph"></div> <script type="text/javascript"> var data = new Chartist.Line('.ct-chart', { labels: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'], series: [ [1, 2, 2, 3, 4, 5, 6, 7, 8, 9], [3, 3, 3, 4, 5, 6, 7, 6, 5, 4], [8, 6.25, 6, 5, 4, 3, 2.3, 2, 3, 5], [3, 2.5, 1.2, null, null, 2, 4, 5, 6, 9] ] }, { fullWidth: true, chartPadding: { right: 10 }, low: 0 }); </script> |
グラフを順番に描写するもの
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <div class="ct-chart ct-perfect-fourth graph"></div> <script type="text/javascript"> var chart = new Chartist.Line('.ct-chart', { labels: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'], series: [ [1, 2, 2, 3, 4, 5, 6, 7, 8, 9], [3, 3, 3, 4, 5, 6, 7, 6, 5, 4], [8, 6.25, 6, 5, 4, 3, 2.3, 2, 3, 5], [3, 2.5, 1.2, null, null, 2, 4, 5, 6, 9] ] }, { low: 0, showArea: true, showPoint: false, fullWidth: true }); chart.on('draw', function(data) { if(data.type === 'line' || data.type === 'area') { data.element.animate({ d: { begin: 2000 * data.index, dur: 2000, from: data.path.clone().scale(1, 0).translate(0, data.chartRect.height()).stringify(), to: data.path.clone().stringify(), easing: Chartist.Svg.Easing.easeOutQuint } }); } }); </script> |
形を変えた棒グラフ
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <div class="ct-chart ct-perfect-fourth graph"></div> <script type="text/javascript"> var chart = new Chartist.Bar('.ct-chart', { labels: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'], series: [ [8, 6.25, 6, -5, -4, -3, -2.3, 2, 3, 5], ] }, { showArea: true, showPoint: false, fullWidth: true }); chart.on('draw', function(data) { if(data.type === 'bar') { data.group.append(new Chartist.Svg('circle', { cx: data.x2, cy: data.y2, r: Math.abs(Chartist.getMultiValue(data.value)) * 3 + 5 }, 'ct-slice-pie')); } }); </script> |
おわりに
- プラグインもあるようです。
- SVGを自由に扱えると、もっと面白いグラフが描けるようです（私は自由に扱えないので勉強します）。
Author Profile
スターフィールド編集部
SHARE
