めにゅーを開く(投げやり) グラフをぺぺーんと生成できるプラグイン はい、グラフです。 JSでアニメーションするグラフを作っていきましょう。 自作してもいいけど、安定したプラグインあるならそれでいいじゃない! そんなわけで、今回はchartJsを使用します。 前段階準備 いつものように、githubからダウンロードしてきて必要ファイルを取ってきましょう。 Chart.js_github 今回はChart.min.jsだけでいいです。 どんなグラフが生成できるのか? 棒グラフ 線グラフ レーダーチャート パイチャート ドーナツチャート Polar Area Chart(鶏頭図) まぁまぁな感じでできるんですねぇ。 ただし、棒グラフ+線グラフなどの組み合わせ技はできないようです 導入方法としては ChartJSを読み込みます。 canvasを設置します。(ID設置必須) 凡例用タグを差し込みま
概要 みなさんこんにちはcandleです。今回はChart.js2.0でy軸の最大値、最小値を設定する方法を紹介します。 Chart.js 2.0では特に指定しないと自動的に、y軸の最大値を設定してくれますが、場合によっては自分で設定したい場合があります。 前提 Chart jsが用意されている 最大値と最小値を設定する 今回はこのline chartで試します。 結論から書くと以下のようなサンプルソースコードになります。y軸を指定しているのはoptionsのところです。 $(document).on('ready', function() { var ctx, data, myChart; ctx = document.getElementById('myChart'); if (ctx !== null) { data = { labels: ['January', 'February
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.bundle.min.js"></script> </head> <body> <div style="height: 500px; width: 500px;"> <canvas id="myChart" width="400" height="400"></canvas> </div> <script> var
データビジュアライゼーション系のライブラリーといえば、D3.jsが有名。でも、シンプルなグラフをWebで描くだけなら、もっと手軽なChat.jsを使ってみてもいいかもしれません。 Webサイトのデータ量が多いときは、データを見やすくするための方法を見つけなければなりません。なんだかんだと、人間は数値データの長いリストを理解するのが得意ではありません。 そこで、チャートやグラフが役に立ちます。チャートやグラフを使えば、 複雑な統計関連のデータが分かりやすく直観的に理解できるようになるのはもちろんのこと、英語を話さない人でも利用可能になります。基本的なチャートであればみな同じスピードで理解できますが、専門用語が散りばめられた文章ではそうはいきません。 必要に応じてチャートを使えば、Webサイトは理解しやすくなり、見た目ももっと魅力的になります。 本記事ではChart.jsと呼ばれるJavaSc
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く