JavaScript チャート サンプル集

ライブ デモのページへようこそ。これらのデモはデスクトップでご覧いただくのが最適です。複雑さを抑えたうえでモバイルでも動作しますので、そちらでも比較していただけます。

Each opens in a new window. No install, no account, no email, no licence key.

1 — 高速 2D: GigaPrime2D

1 つの折れ線チャートにそれぞれ最大 2,000 万点の Subset を 5 つ、合計 1 億点をブラウザーで描画します。これは Web 向けに縮小した数字ではありません。当社の Win32 デスクトップ デモが実際に扱うサイズであり、デモ自身がそう表示します。

データセット全体がティックごとに置き換えられます。追加ではありません。タイマーを入れると、エンジンは毎フレーム 5 つの Subset すべてを渡し直します。置換は、多くの Web チャートが静かに実演を避けているケースであり、このエンジンがそのために作られたケースでもあります。

ページがすぐ使えるように 400,000 点から始まり、そこから段階的に上がっていきます。Y 軸をまとめたり分けたり、Subset を 1 つずつ強調したり、軸を隠したり、ズームの上限を設けたりしながら、フレームレートを見ていられます。

スマートフォンでは、大きい方から 3 つのサイズを提示して失敗させるのではなく、リストから外しています。1 億点にはおよそ 458 MB が必要で、スマートフォンのブラウザーは警告なしにそのタブを終了します。

Launch GigaPrime2D Source on GitHub

2 — 3D サーフェス + 2D コンター + 2D ライン: GigaPrime3D

1 つのデータセットから、1 画面に 3 種類のチャートを。ライティングされた 3D サーフェス、同じデータの 2D コンター、そして選択したスライスを通る 2D ライン。スライスを動かせば 3 つとも追従します。

サーフェスは生成されたノイズではなく、実際のスキャンデータです。1345 x 1345 のグランドキャニオン、1232 x 1028 と 1256 x 684 の材料表面スキャン、1451 x 1451 のノイズを含む地形。回転、拡大、Z 軸の強調、そして光源をモデルの周囲で動かせます。

描画は WebGPU です。したがってサーフェスは、ネイティブ アプリケーションが使うのと同じグラフィックス ハードウェアで描かれます。

WebGPU には最新のブラウザーとセキュア コンテキストが必要です。3D ビューが表示されない場合、原因はほぼ常にマシンではなくブラウザーです。

Launch GigaPrime3D Source on GitHub

3 — 100 以上のサンプルとコードウィンドウを備えたチュートリアル デモ: PeDemo

当社のデスクトップ デモに同梱されているのと同じサンプル群 — WinForms、WPF、WinUI、MFC、Delphi の開発者が 30 年にわたり読み続けてきたもの — が、WebAssembly 上でブラウザーのままネイティブに動作します。

左にリスト、右上のペインに JavaScript のソース、その下にチャート。サンプルをクリックすれば、動作するコードとそれが生み出すチャートを並べて見ることになります。

多くのチャート デモは完成した絵を見せ、コードは「ソースを表示」リンクや、サンプルとは何か月も離れて書かれたドキュメントページの裏に隠します。当社はチャートを生み出した JavaScript を、同じウィンドウの中で、チャートのすぐ上に、常に同期した状態で置いています — それはデモがたった今実行したファイルそのものだからです。

エンジニアが本当に問うているのは「これを描けるか」ではなく「これにどれだけのコードがかかるのか」です。結果の横にプロパティの並びを置けば、その答えはおよそ 5 秒で分かります。そして、それが誠実な評価のされ方です。

しかもこれは、デスクトップで書くのと同じコードです。JavaScript のプロパティ名は WinForms のプロパティ名なので、これらのサンプルを読む C# 開発者は、すでに知っている言語を読んでいることになります。並べた比較はウォークスルーをご覧ください。

Launch PeDemo Source on GitHub

PeDemo に入っているもの

デモ自身のグループ分けにならい、コントロールの種類ごとにまとめています。

2D グラフ

棒、折れ線、面、スプライン、積み上げプロット。加えて、実運用のチャートが実際に必要とする軸・凡例・注釈・テーブルの仕組み。

• Simple Graph
• Auto Statistical Subsets
• Permanent and Scrolling Subsets
• Right Y Axis Comparison Subsets
• Simple High-Low-Close
• Custom Y Axis
• Null Data Gaps
• Pixel-to-Graph Coordinate Conversion
• Point Colors
• Best Fit Coefficients
• Stacked Bar
• Multiple Sub-Titles
• Multi-Axes Subsets 1
• Multi-Axes Subsets 2
• Hot Spots
• Graph Annotations
• Date-Time Handling
• Real-Time Data Handling
• Direct Cell Writes
• Large Quantity of Data
• Rectilinear Heatmap Stacked Bar
• Hatching
• Mixing Plotting Methods per Subset
• Bitmaps and Gradients
• Background Bitmap
• Floating Stacked Bars
• Table Annotations, Simple
• Table Annotations, Stacked
• Table Annotations, Real-Time Update
• Table Annotations, Table Spaced
• Table Annotations, Hot Spots
• Subset Obstacles
• 16 Axes
• Subset Order Control
• Moveable Table
• Demographic Pyramid
• 2D Point Labels

科学技術系チャート

科学技術グラフ: 複数軸と重ね合わせ軸、両対数スケーリング、倍精度データ、ミリ秒単位の日時、コンター、ヒートマップ、スペクトログラム、ドロネー メッシュ。

• Simple Scientific Graph
• Line Annotations
• Direct Cell Writes (Extended)
• Overlapped Multi-Axes 1
• Overlapped Multi-Axes 2
• Data Cursor
• Date-Time Handling
• Rect Selector
• Inverted Y Axis
• Axis Formatting
• Log-Log Axes
• Financial Scaling
• Manual Min and Max Y
• Manual Line Density
• Double-Precision Data
• Programmatic Horizontal Zooming
• Scatter Plus Data-Point Dragging
• Bubble Chart
• Custom Menus
• Partial Axes
• Vertical Y Axis Grid Numbers
• Fixed Grid Aspect
• Event-Based Custom Grid Numbers
• Multi Point Types and Colors
• Multiple Y Axes with Equally Spaced Gridlines
• Millisecond Date-Time Handling
• High-Low Area
• Error Bars
• 2D Contour Lines
• Large 2D Contour with More Colors
• Wave Data Heatmap Spectrogram
• Bitmaps as Symbols
• Second Contour Legend
• Delaunay Chart
• Angled Text Annotation Justifications

リアルタイム

リアルタイムの 3 つの形: 追加してオートスケール、固定した軸に対して追加、そして書き込みヘッドが移動しながらその場で上書き。さらに、毎フレームすべての点が新しくなる全置換のケース。

• Real-Time 1 - full data replacement, 400,000 points per update
• Real-Time 2 - append and autoscale
• Real-Time 3 - append against a manual axis
• Real-Time 4 - overwrite in place with a write-head marker

極座標チャートとスミスチャート

極座標、双極、ローズ、スミスの各チャート - ほとんどの JavaScript ライブラリがそもそも手を出さない RF とアンテナの領域です。

• Simple Polar Chart
• Custom Polar Grid
• Bi-Polar Grid
• Smith Chart
• Rose Chart
• Fancy Tick Marks
• Polar Annotations

円グラフ

切り出したスライス、任意の凡例、ハッチング。

• Simple Pie Chart
• Exploded Slices
• Optional Legend
• Hatching

その次は

• ウォークスルー — この種のチャートを、およそ 10 分でゼロから組み立てます。
• ProEssentialsJS の比較 — Highcharts、SciChart.js、LightningChart JS ほかとの比較。
• PE-Query — 必要なプロパティを尋ねると、コンパイル済みエンジンに対して検証された答えが返ります。
• ライセンス — 年間売上高 25 万ドル未満なら商用利用が無料、再配布を含み、ウォーターマークもありません。
• 何でもご質問ください — サポートは無料・無制限で、エンジンを書いた本人が回答します。