タグ

2014年10月21日のブックマーク (4件)

  • Canvasで超可愛いグラフが作れる!「Chart.js」の紹介 | 株式会社LIG(リグ)|DX支援・システム開発・Web制作

    こんにちは。デザイナーのハルエです。 最近ちょくちょくグラフを用いた制作物に関わることがあり、案件によってはエンジニアさんにお願いしたりIllustratorのグラフツールで作ったりしていたのですが、なんやかんやで時間とられちゃうんですよね。で、もっとこうオシャレでスマートにさくっとハイテンションで作れるものはないかと探してみました。 そこで見つけたのがこれ。「Chart.js」。 めちゃくちゃ愛くるしい動きをしてくれます。デザインもフラットでいい! ポートフォリオやプレゼンなんかにもきっと役立ちますよ。 Chart.jsとは? 折れ線グラフ、棒グラフ、円グラフ、レーダーチャートなど、6種類のグラフが簡単に描けてしまうJavascriptのライブラリです。 HTML5のCanvasを使って描画され、表示の際の気持ちいいアニメーションの動きが特徴的です。とても分かりやすいマークアップなので、

    Canvasで超可愛いグラフが作れる!「Chart.js」の紹介 | 株式会社LIG(リグ)|DX支援・システム開発・Web制作
  • chart.jsで複数のグラフを重ねる方法 - Tech Design

    Chart.jsって? ブラウザ上で色んなグラフを簡単に作れちゃう素晴らしいライブラリ 参考リンク Chart.js | Easy, object oriented client side graphs for designers and developers Canvasで超可愛いグラフが作れる!「Chart.js」の紹介 | 株式会社LIG このグラフ、一度描画させるのは非常に簡単。 サンプルの紹介ページもたくさんある。 しかし、複数のグラフを重ねているサンプルをあまり見ないので作ってみた。(今回はレーダーのグラフで試してみた) chart.jsの使い方 そもそもの使い方としては、jsonデータでグラフの値をセットしてあげてchart.js側で用意されている関数を叩けば普通に描画は出来る。 こんな感じで↓ var radarChartData = { labels : ["a","b"

    chart.jsで複数のグラフを重ねる方法 - Tech Design
  • Loading...

  • [jQuery] tableの内容を取得する | きほんのき

    jQueryでtableの内容を取得する方法いろいろ。 全セルを2次元配列化 var data = []; var tr = $("table tr");//全行を取得 for( var i=0,l=tr.length;i<l;i++ ){ var cells = tr.eq(i).children();//1行目から順にth、td問わず列を取得 for( var j=0,m=cells.length;j<m;j++ ){ if( typeof data[i] == "undefined" ) data[i] = []; data[i][j] = cells.eq(j).text();//i行目j列の文字列を取得 } } テーブル内の全セルを二次元配列にする場合は上記のコードで取得できる。2行目で行を配列化。その配列内のセルを4行目で列ごとにもう一度配列化し、データ保持用の変数dataに代