序文

視覚化プロジェクトには、チャートやグラフが頻繁に使用されます。多くの魅力的なレポートやダッシュボードでは、チャートやグラフが多用されています。次に、人気のオープンソースおよび無料のチャートライブラリをいくつかご紹介します。

1. D3.js

D3はData-Driven Documentsの略で、データ駆動型のチャート作成ライブラリです。JavaScriptで開発されており、特にデータ可視化における作業負荷を大幅に軽減します。D3は、可視化を生成するための複雑な手順をいくつかのシンプルな関数に簡素化します。シンプルなデータポイントをいくつか入力するだけで、様々な魅力的なグラフに変換できます。

次に、これを使用して棒グラフを作成する例を見てみましょう。

コードは次のとおりです。

 chart = BarChart (アルファベット, {
 x : d => d .文字、
 y : d => d .頻度、
 xDomain : d3.groupSort ( alphabet , ([ d ]) => - d.freqnc , d => d.letter ) , //頻度降順でソート
yFormat : "%" 、
 yラベル: "↑頻度" 、
幅
高さ： 500
色： 「スチールブルー」
 })

シンプルなチャートを非常に効率的に作成できるだけでなく、 D3を使用して複雑な視覚化チャートを作成することもできます。

ご興味があればこちらを参考にしてください。

GitHub アドレス: https://github.com/d3/d3。

2. ApexCharts

ApexChartsは、 VueとReactのラッパーを備えたクリーンなSVGチャートライブラリです。様々なデバイスで非常にスムーズに表示され、詳細なドキュメントも付属しています。ApexChartsはMITライセンスのオープンソースプロジェクトであり、商用・非商用を問わず利用可能です。

次に、提供されるチャートのいくつかを紹介します。

レーダー分析:

統計分析：

現在、 Vue 、 Angular 、 Reactといった主流のフレームワークに対応しており、汎用性も高いです。ご興味のある方はぜひ参考にしてください。

GitHub アドレス: https://gitee.com/mirrors/ApexChartsJS。

3. チャート.js

Chart.jsは、 GitHubで6万以上のスターを獲得している、非常に人気のあるオープンソースライブラリです。柔軟かつ軽量で、 HTML5のCanvas要素を用いてレスポンシブなチャートを作成できます。折れ線グラフと棒グラフを簡単に組み合わせて、異なるデータセットを組み合わせることで、非常に興味深い機能を実現できます。VueとReactの両方をサポートしています。

次に、これを使用するための構成を見てみましょう。

定数設定= {
タイプ: 'バー'
データ:データ、
オプション: {
応答性： true
プラグイン: {
伝説： {
位置: '上'
 },
タイトル： {
表示: true
テキスト: 'Chart.js 棒グラフ'
 }
 }
 },
 };

折れ線グラフの例:

レーダーチャート:

ご興味がございましたら、こちらをご参照ください。

GitHub アドレス: https://github.com/chartjs/Chart.js。

4. アントV

AntVの設計原則はAnt Designフレームワークから派生したもので、データ視覚化の特性を備えた指針となっています。Ant Designの価値観を踏襲しつつも、カラーパレットやフォントに関するガイダンスを提供するなど、データ視覚化の分野をさらに深く解釈しています。

AntVは、豊富なプロジェクト経験に基づき、正確性、明瞭性、有効性、そして美しさという4つのコア原則をまとめました。これらの4つの原則は、重要度順にランク付けされ、互いに補完し合い、段階的に関連しています。

提供されているチャートの例を見てみましょう。

ご興味がございましたら、こちらをご参照ください。

GitHub アドレス: https://github.com/antvis。

5. Eチャート

Apache ECharts は、一般的に使用される棒グラフ、円グラフ、折れ線グラフ、および多くの 3D コンポーネントを含む、次のような幅広いグラフ作成ツールが組み込まれたオープンソースのJavaScriptベースのグラフ作成ライブラリです。

ご興味がございましたら、こちらをご参照ください。

GitHub アドレス: https://github.com/apache/echarts。

6. ニヴォ

Nivo は、 D3とReactに基づいた美しい視覚化チャート フレームワークで、チャート データを表示するための 14 種類のコンポーネントを提供します。

Nivoは、豊富なカスタマイズオプションと3つのレンダリングオプション（ Canvas 、 SVG 、そしてAPIベースのHTML）を提供しています。ドキュメントも充実しており、デモはカスタマイズ可能で非常に魅力的です。非常に使いやすい高水準ライブラリです。以下にチャートの例をいくつか示します。

コード例:

 '@nivo/bar'から{ ResponsiveBar }をインポートします。

 const MyResponsiveBar = ({ data /* データタブを参照 */ }) => (
レスポンシブバー
データ= {データ}
キー= {[
 'ホットドッグ'
 'バーガー'
 'サンドイッチ'
 'ケバブ'
 「フライドポテト」
 'ドーナツ'
 ]}
 indexBy = "国"
マージン= {{上: 50 、右: 130 、下: 50 、左: 60 }}
パディング= { 0.3 }
 valueScale = {{ type : 'linear' }}
 indexScale = {{ type : 'band' , round : true }}
 colors = {{ scheme : 'nivo' }}
境界線の色= {{
出典: 'color' 、
修飾子: [
 [
 「暗い」
 1.6
 ]
 ]
 }}
軸上= { null }
軸右= { null }
軸下部= {{
凡例: 「国」
凡例位置: '中央' 、
凡例オフセット: 32
 }}
軸左= {{
ティックサイズ: 5
ティックパディング: 5
ティック回転: 0 、
凡例： 「食べ物」
凡例位置: '中央' 、
凡例オフセット: -40
 }}
ラベルスキップ幅= { 12 }
ラベルスキップ高さ= { 12 }
ラベルテキストカラー= {{
出典: 'color' 、
修飾子: [
 [
 「暗い」
 1.6
 ]
 ]
 }}
役割= "アプリケーション"
 ariaLabel = "Nivo 棒グラフのデモ"
 barAriaLabel = { function ( e ){ return e . id + ": " + e . formattedValue + " in country: " + e . indexValue }}
 />
 ）

ご興味がございましたら、こちらをご参照ください。

GitHub アドレス: https://github.com/plouc/nivo。

7. 二重音字

Dygraphsは、インタラクティブでスケーラブルな時間制限付きチャートを生成するためのオープンソースのJavaScriptライブラリです。主に高密度データセットの表示に使用され、ユーザーがデータを簡単に閲覧・表示できるようにします。

以下にいくつかのグラフの例を示します。

ご興味がございましたら、こちらをご参照ください。

GitHub アドレス: https://github.com/danvk/dygraphs。

8. プロトヴィス

ProtovisはJavaScriptで視覚化チャートを生成するツールです。以下に例を示します。

バブル画像:

コード例:

 /* サイズとスケール。 */
変数w = 400 ,
 h = 250 、
 x = pv .スケール. linear ( 0 , 1.1 ). range ( 0 , w ),
 y = PV 。スケール。序数( pv . range ( 10 ))。 splitBanded ( 0 , h , 4 / 5 );

 /* ルートパネル。 */
 var vis =新しいpv.Panel ( )
 .width ( w )
 .高さ( h )
下（ 20 ）
 .左( 20 )
 .右( 10 )
 .トップ( 5 );

 /* バー。 */
 var bar = vis 。追加( pv . Bar )
 .データ（データ）
 .top (関数() y (この.index ))
 .高さ( y .範囲( ).バンド)
 .左( 0 )
 .width ( x );

 /* 値のラベル。 */
 bar .アンカー( "右" ). add ( pv .ラベル)
 .textStyle ( "白" )
 .text (関数( d ) d .toFixed ( 1 ) );

 /* 変数ラベル。 */
 bar .アンカー( "左" ). add ( pv .ラベル)
 .textMargin ( 5 )
 .textAlign ( "右" )
 .text ( function () "ABCDEFGHIJK" .charAt ( this .index ));

 /* X軸の目盛り。*/
 vis.add ( pv.Rule )
 .data ( x.ticks ( 5 ))
 .左( x )
 .strokeStyle ( function ( d ) d ? "rgba(255,255,255,.3)" : "#000" )
 .add ( pv.ルール)
 .下( 0 )
 .高さ( 5 )
 .strokeStyle ( "#000" )
 .アンカー( "下 " ). add ( pv .ラベル)
 .text ( x.tickFormat );

 vis.render ( );

ご興味がございましたら、こちらをご参照ください。

GitHub アドレス: https://github.com/protovis。

9. 再チャート

Rechartsは「Redefined Charts（再定義されたチャート）」の略です。この名前は、 Reactだけでなく、構成と設定を再定義することで開発者に提供する独自のデザインエクスペリエンスを反映しています。Rechartsのチャートの例をいくつか見てみましょう。

完全にReactで書かれており、構文が非常にシンプルであることがわかります。

ご興味がございましたら、こちらをご参照ください。

GitHub アドレス: https://github.com/recharts/recharts。

10. フラッペチャート

Frappe Chartsは、無料、オープンソース、軽量、そして依存性のないWebチャートライブラリです。シンプルで整理されており、 VueやReactなどのフレームワークでの使用をサポートしています。以下にチャートの例をいくつか示します。

円グラフ：

パーセンテージ:

ヒートマップ:

二重棒グラフ:

ご興味がございましたら、こちらをご参照ください。

GitHub アドレス: https://github.com/frappe/charts。

H5-Dooringは、個人や企業がH5ページを素早く作成できるよう、常に更新されています。ぜひご参照ください。