JavaScriptチャートライブラリ


223

特定のJavaScriptチャートライブラリ、特にフラッシュをまったく使用しないものを誰かが推奨しますか?

回答:


160

Flashを必要としない純粋なJavaScriptチャート用のオープンソースおよび商用ソリューションが増えています。この回答では、オープンソースのオプションのみを紹介します。

Flashを必要としないグラフィック用のJavaScriptソリューションには、主に2つのクラスがあります。

  • ExplorerCanvasを使用してIEでレンダリングされたキャンバスベースのVMLに依存する
  • IEでVMLとしてレンダリングされた、標準ベースのブラウザー上のSVG

両方のアプローチには長所と短所がありますが、チャートライブラリについては、DOMと統合されており、DOMを使用してチャート要素を操作でき、最も重要なのはDOMイベントを設定できるため、後者をお勧めします。対照的に、Canvasチャートライブラリは、イベントを管理するためにDOMホイールを再発明する必要があります。したがって、イベント処理なしで静的グラフを作成するつもりでない限り、SVG / VMLソリューションの方が優れています。

SVG / VMLソリューションには、次のような多くのオプションがあります。

Raphaelは、IE 6から8、Firefox、Opera、Safari、Chrome、Konquerorを含む非常に優れたクロスブラウザーサポートを備えた、非常にアクティブで、よく維持され、成熟したオープンソースのグラフィックライブラリです。RaphaelはJavaScriptフレームワークに依存しないため、Prototype、jQuery、Dojo、Mootoolsなどで使用できます。

Raphaelをベースにした(以下に限定されない)チャート作成ライブラリは多数あります。

  • Raphaelグラフィックライブラリの拡張であるgRaphael
  • Ico、単一の関数呼び出しに基づく直感的なAPIで複雑なチャートを作成

開示:私はgithubのIcoフォークの開発者です。


5
GraficoとIcoは、Alex Youngによる最初のIcoの2つの互換性のないフォークです。したがって、IcoがGraficoになったと述べることは正確ではありません。Graficoはフォークの1つにすぎません。
Jean Vincent、

ラファエルはもはや維持されていないように見えることに注意すべきです。最後のコミットは2010年7月頃でした。
Alastair Pitts、2011

1
ただ予告するために、ラファエルチャートをダウンロードしました。
オービット、

@Alastair:ラファエル今煎茶が主催して開発されて...または:)彼らが言うように
ロイ・ティンカー

1
SVGはHoneycomb以前のAndroidではサポートされていません。現在の幅広いAndroidデバイスでグラフを表示できることが要件である場合は、Canvasベースのソリューションを選択する必要があります。Sencha Touch Chartsに関するこの記事では、モバイルチャート一般の詳細と、Sencha TouchがCanvasルートに移行した理由を説明します。
パラヴィアンダーソン2011

70

jQueryを使用している場合は、flotが非常に優れていることがわかりました。サンプルを試して、ニーズに合っているかどうかを確認してください。

さらに、ExtJS 4.0は優れたグラフセットを導入しました-非常に強力で、ライブデータを操作するように設計されています。


2
これは、StackOverflowでレピュテーショングラフを作成するために使用されたGeoff Dalgasと同じライブラリです。それは本当に素晴らしいキットです。
Charles Roper、

フロットに関する私の唯一の本当の不満は、IEでレンダリングするとき、100%以外のズームレベルではひどいように見えることです(つまり、すべてのライン/ブロックが一緒に拡大縮小しない-これは間違いなく、高解像度ディスプレイを持つ私たちにとって問題です)。
Bittercoder、2009

2
フロートチャートは、私が見てきた他の多くのチャートよりも見栄えがよいように見えます。ここでは20のJavaScriptのチャートライブラリへのリンクです:javascript.open-libraries.com/utilities/chart/...
B七つの

私もフロットが好きで、以前にさまざまなWebアプリでこれを何度も使用したことがあります。
fedmich

1
私は一般的にフロートが好きですが、すべてのデータを数値にしたいので、顧客ごと(名前ごと)または製品ごとの売上高などをプロットしたい場合は機能しません
Zachary K

60

http://www.highcharts.comをチェックしてください

Highchartsは、純粋なJavaScriptで記述されたグラフ作成ライブラリであり、インタラクティブなグラフをWebサイトまたはWebアプリケーションに簡単に追加できます。Highchartsは現在、折れ線、スプライン、面、エリアスプライン、列、棒、円、散布図のタイプをサポートしています。


12
このライブラリは非営利目的での使用は無料ですが、シングルサイトとマルチサイトには費用がかかることを指摘する価値があります。しかし、それはかなりリーズナブルな価格のようです。
Nick Spacek

最初は恥知らずなプラグとしてそれが本当にすごく見えます!無料の商用利用ではありませんが、価格が妥当であるかどうかはわかりませんが、一見大丈夫です。
Trufa

これはCloudFlare.comで使用されているものと同じグラフ作成ライブラリであり、非常に優れています。ASP.NETであるDevExpressチャートライブラリを使用しようとしていて、highchartsライブラリを見つけたときにサーバーで画像をレンダリングしました。私はこれが進むべき道であるとすぐに確信しました。私が見た中で最も人目を引くダッシュボード/アナリティクスの1つを持っているCloudFlareがそれを使用していることを知ったとき、私も販売されました!私は現在それを実験しています、そしてそれは私のウェブページにチャートを埋め込もうとする私の最初の試みでうまくいきました…それであまりにも使いやすいようです!
Loudenvier 2011

1
ハイチャートにもう1票投票してください。私は現在それを使っています、そしてそれは素晴らしいです。jQuery、Mootools、Prototypeをサポートし、セットアップと使用が非常に簡単です。
gnclmorais

1
Stackoverflow自体はhighchartsを使用しますstackoverflow.com/users/22656/jon-skeet?tab=reputation
Scott

36

それはあなたが探しているものとは正確には違うかもしれませんが、
GoogleのChart APIはとてもクールで使いやすいです。


16
そのJavaScriptではありません
user102008

5
ちょうどGoogleのチャートは、インターネット接続を必要とし、また、クライアントの要求の数にいくつかの制限が許可され、覚えて
fedmich

@ user102008:今です:)(必要に応じて、古い画像ベースのAPIに引き続きアクセスできます)
Spycho

Google Chart APIはオフラインでは使用できません。モバイル開発には適していません。
oldwizard

横型ローソク足をする必要があります、グーグルチャートAPIでそれが可能かどうか誰でも知っていますか?
Tom Stickel

15

SVGに基づく別のJavaScriptライブラリがあります。それはプロトビスと呼ばれ、スタンフォード視覚化グループから来ています

また、優れたインタラクティブなグラフィックスと視覚化を作成することもできます。

http://vis.stanford.edu/protovis/ex/

最新のWebブラウザー専用ですが

更新: protovisチームは、d3.js(データドリブンドキュメント)と呼ばれる別のライブラリに移動しました。

「Protovisチームは現在、アニメーションとインタラクションのサポートを改善した新しい可視化ライブラリD3.jsを開発しています。D3は、Protovisの多くの概念に基づいて構築されています。」

新しいライブラリは次の場所にあります。

http://mbostock.github.com/d3/

更新2:

「人力車」は、インタラクティブな時系列グラフを作成するためのJavaScriptツールキットです。少し強力ではありませんが、d3.jsでの作業を大幅に簡素化するd3.jsに基づいています。

http://code.shutterstock.com/rickshaw/


簡単に見ると、D3がProtovisを「置き換える」とは思わない。彼らはそれをより面白くて最先端であると考えているので、私はチームが「進んだ」と言います。
David J.11年

14

私は最近、javascriptチャートライブラリを探していましたが、最終的には自分の要件に非常によく合うjqplotに落ち着く前に全体を評価しました。Jean Vincentの回答が述べたように、あなたは本当にキャンバスベースのソリューションとsvgベースのソリューションのどちらかを選択しています。

私の主な長所と短所は次のとおりです。Raphael(および派生)のようなSVGベースのソリューションは、非常に動的/インタラクティブなチャートを作成する場合に最適です。または、グラフ作成の要件が非常に一般的でない場合(たとえば、ある種のハイブリッドグラフを作成したい場合や、他の誰もまだ考えていない新しい視覚化を思いついた場合)。欠点は、学習曲線と作成する必要があるコードの量です。数分でグラフを作成するのではなく、実際の学習時間を費やして、比較的単純なグラフを作成するために十分な量のコードを書く準備をします。

グラフ作成の要件がかなり標準的なものである場合(たとえば、いくつかの線グラフまたは棒グラフ、あるいはおそらく1つまたは2つの円グラフが必要で、対話性が制限されている場合)、キャンバスベースのソリューションを検討する価値があります。学習曲線はほとんどありません。数分以内に基本的なチャートを作成できます。多くのコードを記述する必要はありません。基本的なjavascript / jqueryの数行で十分です。もちろん、ライブラリがサポートする特定の種類のグラフのみを作成できます。通常、折れ線、棒、円のさまざまな種類に限定されます。対話機能の選択は非常に制限されます。つまり、そこにある多くのライブラリーでは存在しませんが、より良いものではいくつかの限定されたホバー効果が可能です。

私は本当にいくつかの標準的なタイプのチャートしか必要としなかったので、キャンバスベースのソリューションであるJQplotを使いました。私の調査とさまざまな選択肢を試してみたところ、それは合理的にフル機能を備えており(標準的なチャートの後にしかない場合)、非常に使いやすいので、要件が類似している場合はお勧めします。

要約するには、単純で今すぐチャートが必要な場合は、JQplotを使用してください。複雑で異なっていて、時間に追われていないので、ラファエルと友達と一緒に行きます。


14

jqPlotは素晴らしいです。要件がかなり「普通」で、いくつかのグラフを描画したいだけの場合、jsのグラフ作成オプションの数に圧倒されている可能性があります。何時間も調査したくない場合は、jqPlotを使用することをお勧めします。ほとんどの人のほとんどのユースケースをカバーしています。代替案の中には、特定のタイプのチャートに特化したものや、特定のユースケースを念頭に置いて構築されたものがあります。


いくつかの研究を行った後もそうだと思います。現時点では、無料のJSチャートライブラリの中で最高のライブラリの1つに見えます。
jturcotte 2010




3

純粋なJavaScriptチャートには、gRaphaëlと、その上に構築された純粋なJavaScriptベクターグラフィックライブラリ(Raphaël)をお勧めします。

gRaphaëlは現在、Firefox 3.0以降、Safari 3.0以降、Opera 9.5以降、およびInternet Explorer 6.0以降をサポートしています。


1
このlibにはドキュメントがないことを頭に上げておきたいのですが、とてもいいです。
オービット、


3

もう1つはRGraphです。JavaScriptチャートとグラフライブラリ:

http://www.rgraph.net

キャンバスベースなので高速で、約20種類のグラフタイプがあります。非商用利用も無料です!


2

私のお気に入り(フロット)についてはすでに触れました。

ただし、必ずオルソを調べてください。ツリーチャートやタイムラインに最適です。





2

新しいスタートアップのためにTechOctave Charts Suiteのライセンスを購入しました。私はそれらを強くお勧めします。ライセンスは簡単です。チャートは素晴らしいです!簡単に始めることができ、必要なときに強力なAPIを使用できます。コードがどれほどクリーンで拡張性に優れているかに驚いた。私たちの選択に本当に満足しています。








0

ArcadiaChartsをお勧めします。JavaScriptとGWTのための真新しいプロフェッショナルチャートライブラリ。プラグインなしですべてのブラウザで実行されます。簡単で高速:ほんの数行のコードで見栄えの良いグラフを作成します。非商用利用は無料です。


私はこれをいじっていましたが、Webサイトで商用ライセンスを取得する方法がないことに気付きました。実際、これが無料であるかどうかは、このWebサイトでは明らかではありません。
zumalifeguard

あなたが正しいです。Webサイトが更新され、要件に合った商用ライセンスArcadiaChartsを簡単に見つけられるようになりました 。
Hoang-Tran Vo


0

必要なのは棒グラフのみの場合。古いプロジェクトで使用していたコードを公開しました。誰かが最近のバージョンのIEでVML実装が壊れていると私に言ったが、SVGは問題なく動作するはずだ。プロジェクトに戻って、すでに持っているサーバーサイドレンダラーと、おそらくWebGLレンダリングレイヤーをリリースしている可能性があります。リンクがあります:http : //blog.conquex.com/?p=64


0

おそらくOPが探しているものではないでしょうが、この質問はJSチャートライブラリオプションのリストになっているので、jQuery Sparklinesは本当にクールです。


弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.