dfltweb1.onamae.com – このドメインはお名前.comで取得されています。このドメインは、お名前.comで取得されています。 お名前.comのトップページへ Copyright © 2020 GMO Internet, Inc. All Rights Reserved.
JavaScriptで爆速グラフ・チャートが作成できる「CanvasJS」を使ってみた！ : うえぶはっく
ちょっとしたデータをサクッと「グラフ」や「チャート」にして、Webページに素早く公開したい人に最適なJavaScriptライブラリ「CanvasJS」のご紹介です！ 類似のライブラリはいくつかありますが、「CanvasJS」はわずか数行のコードですぐにグラフが作成でき、なおかつ豊富なパラメータをいじることで驚くほど細かいカスタマイズも実現できるのが特徴的です。 今回は、基本的な使い方を中心にご紹介しようと思います！ 必要なファイルを準備しよう！ 「CanvasJS」の本体ファイルは、サイトのトップページからダウンロードできますが、CDN経由からも利用できるようになっています。 https://cdnjs.cloudflare.com/ajax/libs/canvasjs/1.7.0/canvasjs.min.js これを、HTMLファイルに読み込みます！ // index.html <!d
JavaScriptのグラフライブラリを52種類も集めた「JavaScript Graphs」。グラフの種類や依存ライブラリ、価格などで絞り込み可能
JavaScriptのグラフライブラリを52種類も集めた「JavaScript Graphs」。グラフの種類や依存ライブラリ、価格などで絞り込み可能 数年前に自作のアプリケーションをJavaScriptで作ったときにグラフ機能を実装しようとして、いくつかのグラフ用のJavaScriptライブラリを探して試したことがありました。JavaScriptライブラリを探すのは、それなりに手間がかかるものでした。 もちろん当時からJavaScriptのグラフライブラリの情報をまとめたサイトはいくつかありましたが、最近登場した「JavaScript Graphs」は52種類ものライブラリを集めて、ビジュアルに一覧できるようにしたサイトです。 さまざまな条件で絞り込みができる便利な機能も備えており、条件としては折れ線グラフやドーナッツグラフに対応したものなどグラフの種類、無料や有料、非商用のものなどの価格
Canvasで超可愛いグラフが作れる！「Chart.js」の紹介 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。デザイナーのハルエです。 最近ちょくちょくグラフを用いた制作物に関わることがあり、案件によってはエンジニアさんにお願いしたりIllustratorのグラフツールで作ったりしていたのですが、なんやかんやで時間とられちゃうんですよね。で、もっとこうオシャレでスマートにさくっとハイテンションで作れるものはないかと探してみました。 そこで見つけたのがこれ。「Chart.js」。 めちゃくちゃ愛くるしい動きをしてくれます。デザインもフラットでいい！ ポートフォリオやプレゼンなんかにもきっと役立ちますよ。 Chart.jsとは？ 折れ線グラフ、棒グラフ、円グラフ、レーダーチャートなど、6種類のグラフが簡単に描けてしまうJavascriptのライブラリです。 HTML5のCanvasを使って描画され、表示の際の気持ちいいアニメーションの動きが特徴的です。とても分かりやすいマークアップなので、
様々なグラフを描画できるJavaScriptライブラリ「NVD3.js」:phpspot開発日誌
NVD3.js :: re-usable charts for d3.js 様々なグラフを描画できるJavaScriptライブラリ「NVD3.js」 d3.jsという以前紹介したライブラリをベースに利用しているみたい。 グラフ描画のライブラリは色々ありますが、こちらのライブラリで描画するグラフのデザインもなかなかいい感じですね マウスとのインタラクティブなグラフ実装が可能で拡張も容易みたい サンプルページにはソースがついているので参考に組めば抵抗なくグラフが描けそうです 関連エントリ 見た目がクールなグラフ描画用jQueryプラグイン「Morris.js」 HTML5で綺麗でインタラクティブなグラフが描けるライブラリ「Flotr2」 様々な時系列グラフを描画できるJavaScriptライブラリ「Rickshaw」 クールなドアノブ風の％グラフを描画できるjQuery Knob
インタラクティブでアニメーションするグラフが描けるJSライブラリ「Highcharts」:phpspot開発日誌
インタラクティブでアニメーションするグラフが描けるJSライブラリ「Highcharts」が公開されています。 マウスが上に乗るとポップアップしてヒントが出るようなグラフもこのJSライブラリで描画できます。 デモページでは、実に多数のサンプルグラフを見ることが出来ます。 それにしてもJSなのに描画するグラフが滑らかでいいですね。 以下のエントリを参照してください。 Highcharts - Interactive JavaScript charts for your webpage 関連エントリ JavaScriptだけでさまざまなグラフを描画できる高機能ライブラリ『HighCharts』 - IDEA*IDEA
PHPとCSSで動的に綺麗なパーセンテージグラフを描画サンプル:phpspot開発日誌
Using PHP and CSS to make a simple graph | Papermashup.com PHPとCSSで動的に綺麗なパーセンテージグラフを描画サンプル。 次のような、なんとも美しいパーセンテージを表すグラフを描画することが出来るソースが公開されています。 JavaScript では何も行わず、サーバサイドで固定HTMLを出しちゃってる感じですが、JavaScript でアニメーションさせてみてもよさそうですね。 関連エントリ CSSオンリーでクールなグラフを書くサンプル集 ピュアCSSでクールなグラフサンプル「Pure Css Data Chart」 CSSだけで円グラフを表示するサンプル
MOONGIFT: » 要チェック！テーブルからグラフを生成するJavaScriptライブラリ「Bluff」:オープンソースを毎日紹介
※ 画像は公式サイトのデモより これは面白い発想だ。Web上でグラフを作成、表示するライブラリは数多く存在する。その際に使う方式としては、基準になる点をXY軸それぞれに対して追加し、描画するという方式だ。これはプログラム言語にとっては簡単な方式かも知れない。 JavaScriptだけで画像グラフを生成する だが、使い慣れている表計算ソフトウェアの場合はどうだろう。はじめに表があり、そこからデータを読み取ってグラフを描くようになっている。その慣れた方式を使えるのがこちらのライブラリだ。 今回紹介するオープンソース・ソフトウェアはBluff、グラフ描画ライブラリだ。 BluffはJavaScriptのライブラリで、画像形式（PNG）のグラフを生成する。棒グラフ、円グラフ、エリアグラフ、折れ線グラフなど様々なグラフ形式をサポートしている。背景色を変えたり、複数のデータを描画できるなど多機能なライ
PHPでクールなグラフを描画できるクラスライブラリ「pChart」:phpspot開発日誌
pChart | a PHP Charting library pChart is a PHP class oriented framework designed to create aliased charts.PHPでクールなグラフを描画できるクラスライブラリ「pChart」。 次のようなグラフが描画できます。（円、棒グラフなど） 色々と、グラフ描画ライブラリは存在しますが、こうした描画スタイルもいいですね。 関連エントリ GoogleChartsAPIをPHPから簡単に使える「GoogChart」 jQueryベースの滑らかなグラフ描画ライブラリ「Flot」 CSSだけで円グラフを表示するサンプル
jQueryベースの滑らかなグラフ描画ライブラリ「Flot」:phpspot開発日誌
Ruminations: Flot 0.1 released! It draws on inspiration from Plotr and PlotKit, and several other commercial packages. But also from venerable old gnuplot - there's nothing more boring than hand-picking axis scales so I wanted the default algorithm to be smart. jQueryベースの滑らかなグラフ描画ライブラリ「Flot」。 Flotを使えば次のようなグラフをJavaScriptで描画することが可能です。 コードは次のように書くみたいです。 <div id="placeholder" style="width:600px;height
無償利用可能なFlashのグラフ描画コンポーネント「FusionCharts Free」 - GIGAZINE
商用以外では無料使用できるFlashのグラフ描画コンポーネントで、ASP.NET、ASP、PHP、JSP、ColdFusion、Ruby on Rails、通常のHTMLページ、PowerPointによるプレゼンテーションなどで利用することが可能です。パイチャートや棒グラフ、折れ線グラフなどなど、作成できるグラフの種類も多彩。 実際の具体的な例などは以下から。 FusionCharts Free - Animated Flash Charts & Graphs for ASP, ASP.NET, PHP applications http://www.fusioncharts.com/free/ グラフの例は以下からいろいろと見ることができます。 Chart Gallery Online Demos ダウンロードは以下のフォームに必要事項を記入すれば可能です。 Download なお、製品
MOONGIFT: � 要注目！Flash製グラフ「amCharts」:オープンソースを毎日紹介
格好いいグラフを見るとどきどきしてくる。表計算ソフトウェアでさも作りました、といったような単純なものでは心に訴える事はできない。何を見せたい、何を表現したいのかを的確に訴える必要がある。 画像で単純に作るのも良いが、動的にグラフィカルにいこう。Flashを使えばそのようなインタフェースも容易に実現できる。 今回紹介するフリーウェアはPie & Donut chart、Flash製のグラフだ。 amChartsは円グラフ、線グラフ、棒グラフそしてX-Yグラフの4つに大別されるグラフ機能を提供している。amChartsへのリンクをつける事でフリーで利用できる。 そのグラフ機能は非常に高い。見た目の奇麗さもあるが、マウスでの操作（円グラフはクリックするとその部分だけが離れる、線グラフはマウスで指定した範囲だけを拡大表示できる）やマウスオーバー時の数字表示等がある。 また、それだけではない。Jav
MOONGIFT: » 日本語可！Flashで作る動的グラフ「Open Flash Charts」:オープンソースを毎日紹介
これまでにもオープンソースで生成できるグラフライブラリを各種紹介してきた。パターンとしては、画像として出力されるもの、JavaScriptで表示されるものの二つがあったように思える。 これはそのどちらでもない。Flashによるグラフ生成ライブラリだ。 今回紹介するオープンソース・ソフトウェアはOpen Flash Charts、Flash製のグラフ生成ライブラリだ。 特に細かい説明をする事もないだろうが、単純に言えばFlashファイルに対して、データのファイルのパスを渡せば表示がされるようになっている。データファイルの生成を動的に行えば、システムに連携したグラフも簡単に作ることができる。 Flashで生成されるだけあって、グラフィカルなものが可能だ。日本語出力にも対応しているのが優位な点だろう。棒グラフ、折れ線グラフ、背景色の変更、複数グラフの描画等、多彩な機能を備えている。 グラフの種類
MOONGIFT: » JavaScriptでFlashを操作「Aflax」:オープンソースを毎日紹介
FlashはHTMLやJava、PHPなどと同じWebの技術ではあるが、デザイン的な要素も入れられることもあって、プログラマの領域とはちょっと違う雰囲気を持っている。 これが使いこなせれば、今までにないサービスの提供も考えられる。この技術を使ってFlash操作を習得しよう。 今回紹介するオープンソース・ソフトウェアはAflax、JavaScriptでFlashを操作できるソフトウェアだ。 Flash8ではExternalInterfaceを利用してJavaScriptと連携できるが、これをさらに進めてAction Scriptをライブラリ化し、JavaScriptから操作できるようにしたのがAflaxだ。 ビジュアル的なグラフを描いたり、絵を動かしたりといった操作も簡単にできる。それらはFlashを意識する事無く、JavaScriptのコードによって生成される。 多数のサンプルが同梱されて
Flashできれいな円グラフを作る「amCharts」で折れ線グラフや面グラフが可能に
Flashの専門知識は不要で、グラフにしたいデータなどを設定ファイルに書いていくだけで完成し、グラフの種類や見せ方もいろいろと指定できる「Flashできれいなパイチャートや円グラフを無料で作る「amCharts」」ですが、非常に利用者数が多かったらしく、ついに折れ線グラフや面グラフを作成可能なバージョンの「amCharts」が登場しました。サイト上からその例を実際に見ることができるのですが、今回もかなり実用性が高そう。見栄えのするグラフを作りたい人には最適かと。 詳細は以下の通り。 amCharts: customizable flash Line & Area chart http://www.amcharts.com/line/ ダウンロードは以下から可能。 DOWNLOAD LINE & AREA CHART 例その1：2種類の線グラフ。データ引用元サイトなどへのリンクをはることも可
Flashできれいなパイチャートや円グラフを無料で作る「amCharts」
この「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つのグラフにし
PHPでフラッシュのグラフを作る「PHP/SWF Charts」 - GIGAZINE
これを使えば無料で恐ろしく見栄えのするフラッシュでできたグラフを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 ほかにも有用なものがあるので、多彩な表現方法を手間無く使いたい人は必見。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
vizoo - 経済データのグラフ作成・共有サイト ビズー
IDEA * IDEA