![【書評】JavaScriptによるデータビジュアライゼーション入門 | IT業界の歩き方](https://cdn-ak-scissors.b.st-hatena.com/image/square/16d0e89ec2f3b232a0b221e0ada23610594943d4/height=288;version=1;width=512/https%3A%2F%2Fwww.2dgod.com%2Fwp-content%2Fuploads%2F2018%2F02%2F20170615175421.png)
ちょっとしたデータをサクッと「グラフ」や「チャート」にして、Webページに素早く公開したい人に最適なJavaScriptライブラリ「CanvasJS」のご紹介です! 類似のライブラリはいくつかありますが、「CanvasJS」はわずか数行のコードですぐにグラフが作成でき、なおかつ豊富なパラメータをいじることで驚くほど細かいカスタマイズも実現できるのが特徴的です。 今回は、基本的な使い方を中心にご紹介しようと思います! 必要なファイルを準備しよう! 「CanvasJS」の本体ファイルは、サイトのトップページからダウンロードできますが、CDN経由からも利用できるようになっています。 https://cdnjs.cloudflare.com/ajax/libs/canvasjs/1.7.0/canvasjs.min.js これを、HTMLファイルに読み込みます! // index.html <!d
Getting started Add morris.js and its dependencies (jQuery & Raphaël) to your page. 1 <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css"> 2 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> 3 <script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script> 4 <script src="//cdnjs.cloudflare.com/ajax/libs/mo
JavaScriptからレーダーチャートをcanvas要素に描画します。パラメータを指定することで、項目、色、凡例表示などお好みのレーダーチャートを柔軟に描画できます。 ダウンロード Release Date Size (byte) Download 使い方 graph_radar_x_x_x.zipを解凍し、html5jpフォルダをウェブサーバにそのままアップロードしてください。グラフを表示させたいHTMLには次のタグを記述してください。 <div><canvas width="400" height="300" id="sample"></canvas></div> 上記タグは次の点に注意してください。 canvas要素は、必ずdiv要素で囲んでください。 canvas要素には、必ずwidth属性とheight属性を記述し、幅と高さを指定してください。 canvas要素には、必ずid属
クールすぎて本当に動的に作ったの?というグラフが描画できてしまう「visifire」 2009年03月18日- Visifire クールすぎて本当に動的に作ったの?というグラフが描画できてしまう「visifire」。 以下にある画像のような、ちょっと他ではなかなか無いグラフを提供してくれます。フリーで使えます。 画像編集ソフトを使えば綺麗なグラフはかけるかもしれないのですが、相当大変です。 が、このライブラリを使ってxmlでデータを書いておけばグラフ描画できます。 データ作成ツールもあるので、xmlも面倒っていう場合にも使えます→ Chart Designer もっとギャラリーを見る ネックはSilverLightなのですが、一旦描画したものをキャプチャして画像に変換してから使ってもよいぐらいクオリティが高いですね。 今後、SilverLightが一般的になっていくことも考えられ、覚えてお
pChart 2.x is born, you can start moving your script to this new version. The new website is at www.pchart.net. pChart is a PHP class oriented framework designed to create aliased charts. Most of todays chart libraries have a cost, our project is intended to be free. Data can be retrieved from SQL queries, CSV files, or manually provided. This project is still under development and new features or
Webサイトを構築していると、サイトの運営状況やアクセス数の管理など、さま ざまな場面でグラフを使用する必要が出てきます。 自分でグラフの描画を行うスクリプトを1から作るのは非常に大変ですが、Web上 には公開されているグラフ描画ライブラリが数多く存在します。 今回はその中から7つのグラフ生成ツールを紹介したいと思います。 ここでは各ライブラリを使用して、最もシンプルな棒グラフの生成方法を紹介し ます。 前編後編に分けて紹介し、前編ではPEAR::Image_Graph、JpGraph、PHP/SWF Charts、HTML-GRAPHs(PHP)を紹介します。 ・PEAR::Image_Graph http://pear.veggerby.dk/ PEARのグラフ生成ライブラリです。 オープンソースのグラフ描画ライブラリ GraPHPite を元に作成されています。 PEAR::Ima
この「amCharts」というのを使えば、無料でFlashのパイチャートや円グラフが作成可能です。Flashの専門知識は不要で、グラフにしたいデータなどを設定ファイルに書いていくだけで完成します。グラフの種類や見せ方もいろいろと指定でき、かなり応用が利きそうな予感。 詳細は以下から。 amCharts: customizable flash Pie & Doughnut chart ダウンロードは下記のページから可能です。 DOWNLOAD PIE & DOUGHNUT 実際の例は以下のページから見ることが可能です。まずは標準的な円グラフ。 http://www.amcharts.com/pie/examples/1/ この例ではグラフの説明がそれぞれのグラフの中に書いてあります。 http://www.amcharts.com/pie/examples/2/ こんな感じで2つのグラフにし
PEAR :: Package :: HTML_Progress2 How to include a loading bar in your XHTML documents quickly and easily. ページ読み込み状況をグラフ化するPEAR::HTML_Progress2。 ページ読み込み状況をCSS+JavaScriptのXHTMLで出力できます。 サンプルプログラムは次のような感じ <?php require_once 'HTML/Progress2.php'; $pb = new HTML_Progress2(); $pb->setAnimSpeed(100); ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-stri
これを使えば無料で恐ろしく見栄えのするフラッシュでできたグラフをPHPで作成することができるようになります。標準的なグラフを表示するだけでなく、アニメーションを使った様々なビジュアル効果を加えたり、印刷ボタンや切り替えボタン、グラフを見る方向の変更、複数のグラフの混在なども簡単にできるので、一風変わったグラフ表示をお手軽にしたい人には最適ではないかと。 PHP/SWF Charts http://www.maani.us/charts/index.php その他のグラフのサンプルは以下を参照 http://www.maani.us/charts/index.php?menu=Gallery ダウンロードはこちらから http://www.maani.us/charts/index.php?menu=Download ほかにも有用なものがあるので、多彩な表現方法を手間無く使いたい人は必見。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く