§Ẏagr

Yagr は、uPlot をベースにした高性能な HTML5 Canvas チャートレンダラーです。uPlot チャートに高レベルな機能を提供します。

§特徴

• 線、エリア、カラム、ドットの表示タイプ。シリーズごとに設定可能
• 設定可能な凡例ツールチップ
• 小数点以下の精度を調整できる軸
• 範囲関数と変換を設定できるスケール
• プロットラインとバンド。描画レイヤーを設定可能
• レスポンシブチャート ( ResizeObserver が必要です)
• 積み上げエリア/カラムの高レベルサポート
• 設定可能なマーカー
• ライト/ダークテーマ
• データ正規化
• クロスヘア、カーソルマーカー、スナップ機能の設定
• Typescript
• ローカライゼーション
• 色名での CSS 変数
• ページネーション付きインライン凡例
• エラーハンドリングと拡張フック
• 欠損データのデータアラインメントと補間
• リアルタイム更新

§ドキュメント

§クイックスタート

npm i @gravity-ui/yagr

§NPM モジュール

import Yagr from '@gravity-ui/yagr';

new Yagr(document.body, {
    timeline: [1, 2, 3, 4, 5],
    series: [
        {
            data: [1, 2, 3, 4, 5],
            color: 'red',
        },
        {
            data: [2, 3, 1, 4, 5],
            color: 'green',
        },
    ],
});

§スクリプトタグ

<script src="https://unpkg.com/@gravity-ui/yagr/dist/yagr.iife.min.js"></script>
<script>
    new Yagr(document.body, {
        timeline: [1, 2, 3, 4, 5],
        series: [
            {
                data: [1, 2, 3, 4, 5],
                color: 'red',
            },
            {
                data: [2, 3, 1, 4, 5],
                color: 'green',
            },
        ],
    });
</script>

§例

何か特定のものを探していますか？ Yagr は demo/examples フォルダに便利な例をいくつか用意しています。現在のバージョンでそれらを起動する方法は次のとおりです。

1. リポジトリをクローンします。
2. 依存関係をインストールします npm i。
3. npm run build を実行します。
4. npx http-server . を実行します。
5. http-server の出力に従ってブラウザで例を開きます。