Gravity UI Charts ·

10種類以上のグラフ（エリア、棒、線、円、散布図、ツリーマップなど）を備えたReactのグラフ描画ライブラリです。

インストール

npm install @gravity-ui/uikit @gravity-ui/charts

@gravity-ui/uikit は必須のピア依存関係です。グラフが依存するテーマ設定とスタイルを提供します。

使用方法

エントリーポイントで @gravity-ui/uikit のスタイルを一度インポートし、アプリを ThemeProvider でラップし、明示的な高さを持つコンテナ内に Chart をレンダリングしてください。

import {ThemeProvider} from '@gravity-ui/uikit';
import {Chart} from '@gravity-ui/charts';

import '@gravity-ui/uikit/styles/fonts.css';
import '@gravity-ui/uikit/styles/styles.css';

const data = {
  series: {
    data: [
      {
        type: 'line',
        name: 'Temperature',
        data: [
          {x: 0, y: 10},
          {x: 1, y: 25},
          {x: 2, y: 18},
          {x: 3, y: 30},
        ],
      },
    ],
  },
};

export default function App() {
  return (
    <ThemeProvider theme="light">
      <div style={{height: 300}}>
        <Chart data={data} />
      </div>
    </ThemeProvider>
  );
}

Chart は親要素のサイズに適合するため、ラッパー要素には高さが必要です。

グラフ設定ツール

このパッケージは、グラフ設定の検証、生成、Monacoエディタとの連携のためにTypeScriptの型定義とJSONスキーマを提供します。セットアップと使用方法の詳細については、グラフ設定ツールのドキュメントを参照してください。

ドキュメント

ライセンス

MITライセンスの下で配布されています。詳細はLICENSEを参照してください。

AIエージェント向け

Gravity UIアプリ向けの宣言的なReactグラフ描画ライブラリです。単一のdata設定から、アプリの他の部分と一致するようにテーマ設定された線、エリア、棒、円、散布図、ツリーマップなどのグラフを描画します。

使用すべき場合

標準的なビジネスグラフ: line、area、bar-x/bar-y、pie、scatter、treemap、waterfall、sankey、radar、heatmap、funnel、x-range。
Gravity UIのテーマ設定（ライト/ダーク）に従い、@gravity-ui/uikit アプリとトークンを共有する必要があるビジュアライゼーション。
命令的に描画するのではなく、宣言的なデータからグラフをレンダリングする場合。

使用すべきでない場合

まだ@gravity-ui/chartkitを使用しているプロジェクト。これは古いアダプターベースのラッパー（YAGR/Highcharts/D3）であり、このパッケージは最新のスタンドアロンレンダラーであり、ドロップインの代替ではありません。
単純な表形式データ。@gravity-ui/tableを使用してください。
React以外またはサーバー専用のレンダリング。ChartはReact SVGをレンダリングし、DOMが必要です。

よくある間違い

コンポーネント名は Chart であり、ChartKit ではありません。 @gravity-ui/charts から {Chart} をインポートしてください。ChartKit は、別のレガシーパッケージである @gravity-ui/chartkit に属します。
data プロップは data で、形状は {series: {data: [...]}} です。 series.data の各エントリは、独自の type と data 配列を持つ1つのシリーズです。トップレベルのシリーズ配列はありません。
サイズ指定のないコンテナでは何もレンダリングされません。 Chart は親要素を埋めるため、ラッパーに明示的な高さを指定してください。
uikitの設定が必要です。 ThemeProvider でラップし、@gravity-ui/uikit/styles/styles.css をインポートしてください。@gravity-ui/uikit は必須のピア依存関係です。

役立つドキュメント

AIエージェント向けドキュメント

インストールされているバージョン向けの、エージェントが読み取れるドキュメントは node_modules/@gravity-ui/charts/dist/docs/INDEX.md にあります。

Charts

§Gravity UI Charts ·

§インストール

§使用方法

§グラフ設定ツール

§ドキュメント

§ライセンス

§AIエージェント向け

§使用すべき場合

§使用すべきでない場合

§よくある間違い

§役立つドキュメント

§AIエージェント向けドキュメント