React チャートとグラフの概要

Ignite UI for React チャートおよびグラフは、データ視覚化の広範なライブラリであり、Web アプリやモバイルアプリの魅力的でインタラクティブなチャートやダッシュボードを実現します。速度と美しさを重視して構築され、最新のすべてのブラウザで動作するように設計されており、完全なタッチとインタラクティブ機能により、レスポンシブビジュアルをあらゆるデバイスの次のアプリにすばやく簡単に組み込むことができます。

Ignite UI for React チャートは、カテゴリシリーズ、ファイナンシャルシリーズ、極座標シリーズ、ラジアルシリーズ、範囲シリーズ、散布シリーズ、シェイプシリーズ、地理空間シリーズなど、あらゆるタイプのデータを視覚化できる 65 種類以上のシリーズと組み合わせをサポートします。実行している比較のタイプ、または伝えようとしているデータストーリーのタイプに関係なく、次のいずれかの方法でデータを表すことができます:

時間毎の変化
比較
相関
配布
地理空間
概要 + 詳細
部分から全体
ランキング

インフラジスティックスの React チャートを使用して、最もニーズの高い視覚化を強化してください。

React チャートとグラフのタイプ

React 製品には、単一のチャート表示からインタラクティブなダッシュボードまで、あらゆるシナリオに対応する 65 を超えるさまざまなチャートおよびグラフタイプがあります。モバイルアプリやウェブアプリ用に、円、棒、エリア、折れ線、ポイント、積層型、ドーナツ、散布、ゲージ、極座標、ツリーマップ、株価、ファイナンシャル、地理空間マップなどの React チャートを作成できます。React チャートと他のチャートの利点は、次のような機能が完全にサポートされていることです:

組み込まれたレスポンシブ Web デザイン
マウス、キーボード、タッチを使用したインタラクティブなパンとズーム
チャートアニメーションのフルコントロール
チャートドリルダウンイベント
リアルタイムストリーミングのサポート
大量 (数百万のデータポイント) のサポート
トレンドラインおよびその他のデータ分析機能

React チャートは、軸、マーカー、シリーズ、凡例、および注釈レイヤーのモジュラーデザインで構築されており、あらゆるタイプのデータストーリーの描画を簡単にデザインできます。単一のデータシリーズを使用して単純なチャートを作成するか、複合ビューに複数の軸があるデータの複数シリーズを使用してより複雑なデータストーリーを作成します。

カテゴリおよびファイナンシャル (財務) チャートとデータチャートの比較

React カテゴリとファイナンシャルチャートは、ドメイン固有のチャートと呼ばれるものです。これは、ドメインがカテゴリまたは財務価格シリーズであることを前提とした React データチャートのラッパーです。

これらの特定のドメインチャートを選択すると、API が簡素化され、軸、系列、注釈などの属性を明示的に定義する必要なく、データに関する多くのインターフェイスを描画してチャートシナリオを自動的に構成できます。対照的に、データチャートは非常に明示的であり、チャートのすべての重要な部分を定義する必要があります。

ドメインチャートはその中核でデータチャートを使用しています。したがって、同じパフォーマンスの最適化が両方に適用されます。違いは、開発者にとって非常に簡単に指定できるようにしようとしているのか、それとも可能な限り柔軟にしようとしているのかにあります。React データチャートはより詳細であり、必要なすべてのチャート機能を利用できるようになり、たとえば、任意の数の系列、軸、または注釈を組み合わせて組み合わせることができます。カテゴリチャートとファイナンシャルチャートでは、数値 X 軸を持つ散布系列を含む系列など、データチャートの方が適している、簡単に実行できない状況が存在する可能性があります。

最初はどのチャートを選択すればよいのか判断するのが難しいかもしれません。シリーズのタイプと、提示したい追加機能の数を理解することが重要です。より軽量の基本カテゴリまたはファイナンシャルシリーズの場合は、ドメインチャートのいずれかを使用することをお勧めします。より高度なシナリオの場合は、カテゴリチャートの chartType プロパティでカバーされるもの以外のもの (積層シリーズや散布シリーズ、数値データや時間ベースのデータなど) を表示するなど、React データチャートの使用をお勧めします。React ファイナンシャルチャートでは、縦棒、OHLC バー、ローソク足、折れ線シリーズタイプのみがカバーされていることに注意してください。

React カテゴリとファイナンシャルチャートを使いやすくしていますが、将来はいつでもデータチャートに切り替えることができます。

React 棒チャート

React 棒チャート (棒グラフ) は、さまざまなカテゴリのデータの頻度、カウント、合計、または平均を、同じ幅と異なる長さの水平棒でエンコードされたデータとすばやく比較するために使用される最も一般的なカテゴリチャートタイプの 1 つです。これらは、時間の経過に伴う項目の価値の変動、データ分布、ソートされたデータのランキング (高から低、最悪から最高) を表示するのに理想的です。データは、チャートの左から右にデータポイントの値に向かって伸びる長方形のコレクションを使用して表されます。棒チャートの詳細をご覧ください。

React 円チャート

React 円チャート、または円グラフは、一般的な部分から全体へのチャートタイプです。部分から全体へのチャートは、データセットのカテゴリ (部分) が合計 (全体) 値になる方法を示します。カテゴリは、分析されている合計値に対する値のパーセンテージに基づいて、他のカテゴリに比例して表示されます。円チャートは、データ値を円形または円チャートのセクションとして描画します。各セクションまたは円スライスには、基本データ値に比例する円弧の長さがあります。円スライスで表される合計値は、100 または 100% などの全体の値を表します。円チャートは小さなデータセットに最適で、一目で簡単に読むことができます。円チャートの詳細をご覧ください。

React 折れ線チャート

React 折れ線チャート、または折れ線グラフは、傾向を示し、比較分析を実行するために、一定期間にわたる 1 つ以上の数量の直線セグメントで接続されたポイントによって表される連続データ値を示す一種のカテゴリ折れ線チャートです。Y 軸 (左側のラベル) は数値を示し、X 軸 (下側のラベル) は時系列または比較カテゴリを示します。比較する 1 つ以上のデータセットを含めることができます。これはチャートで複数の線として描画されます。折れ線チャートの詳細をご覧ください。

React ドーナツチャート

React ドーナツチャート、またはドーナツグラフは、円チャートの変形であり、全体の一部を表す円内の変数の発生を比例的に示します。ドーナツチャートには、円チャートの中央に円形の開口部があり、タイトルまたはカテゴリの説明を表示できます。ドーナツチャートは、階層データを視覚化するための組み込みサポートを使用して、複数の同心円をサポートできます。ドーナツチャートの詳細をご覧ください。

React エリアチャート

React エリアチャートは、直線セグメントで接続されたポイントのコレクションを使用して描画され、線の下の領域が塗りつぶされます。値は y 軸 (左側のラベル) に表示され、カテゴリは x 軸 (下部のラベル) に表示されます。エリアチャートは、プロットされた値の合計を表示することにより、一定期間の変化量を強調したり、複数の項目や全体の一部の関係を比較したりします。エリアチャートの詳細をご覧ください。

React スパークラインチャート

React スパークラインチャート、またはスパークライングラフは、グリッドセル内や、データストーリーを伝えるために単語サイズの視覚化が必要な場所など、小規模なレイアウト内で描画することを目的としたカテゴリチャートの一種です。他の React チャートタイプと同様に、スパークラインチャートには、チャートタイプ、マーカー、範囲、トレンドライン、不明な値のプロット、ツールチップなど、構成およびカスタマイズできるいくつかの視覚要素と対応する機能があります。スパークラインチャートは、折れ線チャート、エリアチャート、縦棒チャート、または Win/Loss チャートとして描画できます。スパークチャートに相当するフルサイズのチャートの違いは、Y 軸 (左側のラベル) と X 軸 (下部のラベル) が表示されないことです。スパークラインチャートの詳細をご覧ください。

React バブルチャート

React バブルチャート (バブルグラフ) は、3 つの数値で構成されるデータを表示するために使用されます。値の 2 つは、デカルト (X、Y) 座標系を使用して交点としてプロットされ、3 番目の値は点の直径サイズとして描画されます。これにより、バブルチャートにその名前が付けられます。これは、プロットの X 座標と Y 座標に沿ったさまざまなサイズのバブルの視覚化です。React バブルチャートは、データ相関とサイズによって描画されたデータ値の違いとの関係を示すために使用されます。4 番目のデータディメンション (通常は色) を使用して、バブルチャートの値をさらに区別することもできます。バブルチャートの詳細をご覧ください。

React ファイナンシャルチャート/株価チャート

React ファイナンシャル/株価チャートは、時系列チャートで株価デーとファイナンシャルデータを描画する複合視覚化です。日/週/月フィルター、チャートタイプの選択、ボリュームタイプの選択、インジケーターの選択、トレンドラインの選択などのインタラクティブな視覚要素がツールバーに含まれています。カスタマイズ用に設計された React 株価チャートは、データの視覚化と解釈を容易にするために、任意の方法でカスタマイズできます。ファイナンシャルチャートは、X 軸 (下のラベル) に沿って日時データを描画し、Open、High、Low、Close ボリュームなどのフィールドを表示します。時系列データを描画するチャートのタイプは、棒、ローソク、縦棒、または折れ線です。株価チャートの詳細をご覧ください。

React 縦棒チャート

React 縦棒チャート (縦棒グラフ) は、さまざまなカテゴリのデータの頻度、カウント、合計、または平均を、同じ幅と異なる長さの垂直棒でエンコードされたデータとすばやく比較するために使用される最も一般的なカテゴリチャートタイプの 1 つです。これらは、時間の経過に伴う項目の価値の変動、データ分布、ソートされたデータのランキング (高から低、最悪から最高) を表示するのに理想的です。データは、チャートの上から下にデータポイントの値に向かって伸びる長方形のコレクションを使用して表されます。縦棒チャートの詳細をご覧ください。

React 複合チャート

React 複合チャートまたはコンボチャートは、同じプロット領域でさまざまなチャートタイプを組み合わせた視覚化です。スケールが大きく異なり、異なる単位で表される可能性のある 2 つのデータシリーズを表示する場合に非常に役立ちます。最も一般的な例は、一方の軸にドル、もう一方の軸にパーセンテージです。複合チャートの詳細をご覧ください。

React 極座標チャート

React 極座標エリアチャートまたは極座標グラフは、極座標チャートのグループに属し、頂点または隅がデータポイントの極 (角度/半径) 座標に配置された塗りつぶされたポリゴンの形状を持っています。極座標エリアチャートは、散布図と同じデータプロットの概念を使用しますが、データポイントを水平方向に伸ばすのではなく、円の周りにラップします。他のシリーズタイプと同じように、複数の極座標エリアチャートは同じデータチャートにプロットでき、データセットの相違点を示すために互いにオーバーレイできます。極座標チャートの詳細をご覧ください。

React 散布図

React 散布図は、デカルト (X、Y) 座標系を使用してデータをプロットすることにより、2 つの値間の関係を示すために使用されます。各データポイントは、X 軸と Y 軸上のデータ値の交点として描画されます。散布図は、不均一な間隔またはデータのクラスターに注意を向けます。予測結果の収集データの標準偏差をハイライト表示し、科学データや統計データをプロットするためによく使用されます。React 散布図は、データがバインド前に時系列になっていない場合でも、X 軸と Y 軸でデータを時系列に整理してプロットします。散布図の詳細をご覧ください。

React シェープチャート

React シェープチャートは、形状の配列 (X/Y ポイントの配列) を取り、デカルト (x、y) 座標系のポリゴンまたはポリラインのコレクションとして描画するチャートのグループです。これらは、科学データの強調領域でよく使用されますが、ダイアグラム、青写真、さらには建物の間取り図のプロットにも使用できます。シェープチャートの詳細をご覧ください。

React スプラインチャート

React スプラインチャート、またはスプライングラフは、傾向を示し、比較分析を実行するために、一定期間にわたる 1 つ以上の数量の滑らかな線セグメントで接続されたポイントによって表される連続データ値を示す一種のカテゴリ折れ線チャートです。Y 軸 (左側のラベル) は数値を示し、X 軸 (下側のラベル) は時系列または比較カテゴリを示します。比較する 1 つ以上のデータセットを含めることができます。これはチャートで複数の線として描画されます。React スプラインチャートは React 折れ線チャートと同じですが、唯一の違いは、折れ線チャートが直線で接続された点であるのに対し、スプラインチャートの点は滑らかな曲線で接続されていることです。スプラインチャートの詳細をご覧ください。

React ステップチャート

React ステップ折れ線チャート、またはステップ折れ線グラフは、ステップ状の進捗を形成する連続した垂直線と水平線で接続されたデータポイントのコレクションを描画するカテゴリチャートです。値は Y 軸 (左側のラベル) に表示され、カテゴリは X 軸 (下部のラベル) に表示されます。React ステップ折れ線チャートは、一定期間の変化量を強調するか、複数の項目を比較します。React ステップ折れ線チャートは、ステップ線の下の領域が塗りつぶされていないことを除いて、すべての点で React ステップエリアチャートと同じです。ステップ折れ線チャートの詳細をご覧ください。

React ツリーマップ

Ignite UI for React ツリーマップは、ネストされた一連のノードとして階層 (ツリー構造) データを表示します。ツリーの各ブランチにはツリーマップノードが提供されて、サブマップを表す小さなノードでタイル化されます。各ノードの長方形には、データ上の指定されたディメンションに比例した領域があります。多くの場合、ノードは色分けされて、データの個別のディメンションを示します。ツリーマップの詳細をご覧ください。

React チャート主な機能

組み込みの時間軸を使用して、データが時間の経過とともにどのように変化するかを示します。チャートを操作すると、時間スケールとラベル書式が動的に変更されます。YahooFinance や GoogleFinance など、ファイナンシャルチャートに期待されるすべての機能を備えた完全なファイナンシャルチャートが含まれています。

動的なチャート

新しい複合チャートを作成し、単一のチャートで複数のシリーズを重ね合わせて、データを視覚化します。チャートでは、複数のチャート列を表示および重ねて、積層型縦棒を作成できます。

カスタムツールチップ

新しい複合ビューを作成し、単一のチャートで複数のシリーズを重ね合わせて、データを視覚化します。チャートでは、画像やデータバインディングを使用してカスタムツールチップを作成したり、複数のシリーズのツールチップを 1 つのツールチップに組み合わせたりすることもできます。

リアルタイムの高パフォーマンスなチャート

ライブのストリーミングデータを使用して、ミリ秒レベルの更新で数千のデータポイントをリアルタイムで表示します。タッチデバイスでチャートを操作しているときでも、ラグ、画面のちらつき、表示の遅れは発生しません。デモについては、高頻度のチャートトピックを参照してください。

大量のデータ処理

チャートパフォーマンスを最適化して、エンドユーザーがチャートのコンテンツをズームイン/ズームアウトまたはナビゲートしようとしたときにスムーズなパフォーマンスを提供し続けながら、数百万のデータポイントを描画します。デモについては、大量データのチャートトピックを参照してください。

モジュラーデザイン

Reactチャートは、モジュール性のために設計されています。必要な機能のみが展開一部であるため、描画されたページで可能な限り最小のフットプリントを取得します。

スマートデータバインディング

チャートタイプの選択はお任せください。当社のスマートデータアダプタは、データに最適なチャートタイプを自動的に選択します。データソースを設定するだけです。

トレンドライン

React チャートは、線形 (x)、二次 (x2)、三次 (x3)、四次 (x4)、五次 (x5)、対数 (logn x)、指数 (ex)、べき乗 (axk + o(xk)) など、必要になるすべてのトレンドラインをサポートします。

インタラクティブなパニングとズーム

シングルタッチまたはマルチタッチ、キーボード、ズームバー、マウスホイールを使用し、マウスで任意の長方形領域をドラッグ選択してズームインし、データポイントのクローズアップ、データ履歴のスクロール、またはデータ領域のパンを行います。

マーカー、ツールチップ、およびテンプレート

10 個のマーカータイプのいずれかを使用するか、独自のマーカー-テンプレートを作成して、データをハイライト表示するか、シンプルなツールチップまたはカスタムツールチップを使用した多軸および複数系列のチャートで、データにコンテキストと意味を追加します。

その他の詳細

他の React チャートを検討している場合は、次のことを考慮しましょう:

65 を超える React チャートタイプと複合チャートが含まれており、スマートデータアダプタを使用した類を見ない最も簡単な構成が可能です。
チャートは、Angular、Blazor、jQuery / JavaScript、React、UNO、UWP、WPF、Windows Forms、WebComponents、WinUI、Xamarin などのすべてのプラットフォームで最適化されています。すべてのプラットフォームで同じ API と機能をサポートします。
当社の株価チャートとファイナンシャルチャートは、YahooFinance または Google Finance のようなエクスペリエンスに必要なすべてを 1 行のコードで提供します。
Ignite UI for Angular は、Angular 開発者向けの Angular 上に構築されており、サードパーティの依存関係はありません。Angular 用に 100% 最適化されています。
他社のパフォーマンスに対してテストします。当社は高速で大量のデータを処理できることを証明できます。大量のデータとリアルタイムのデータストリーミングをどのように処理するかをご自身で確認してください。
24/5 対応しております。インフラジスティックスは、常にオンラインでグローバルサポートを提供しています。北米、アジア太平洋、中東、およびヨーロッパでは、いつでもご利用いただけます。
チャートの他に、React には多くの UI コントロールもあります。アプリケーション構築のための完全な React ソリューションを提供します!

API リファレンス

このトピックで言及されているすべてのチャートタイプは、次の API コンポーネントに実装されています: