# 使い方

# インストール

# npm

npm install chartjs-plugin-streaming@next --save

補足

このプラグインは、Bower (opens new window) を使ってインストールすることもできます。

# CDN

(opens new window) (opens new window)

デフォルトでは、https://cdn.jsdelivr.net/npm/chartjs-plugin-streaming は最新の（圧縮された）バージョンを返しますが、互換性を損なう変更を避けるために、常にバージョンを指定することを強くお勧めします (opens new window)。これは、URL に @{version} を追加することで実現できます。

https://cdn.jsdelivr.net/npm/chartjs-plugin-streaming@next     // プレリリースバージョン
https://cdn.jsdelivr.net/npm/chartjs-plugin-streaming@2.0.0    // 厳密なバージョン
https://cdn.jsdelivr.net/npm/chartjs-plugin-streaming@2        // 最新の 2.x.x

jsDeliver のバージョニングについては、同サービスのウェブサイト (opens new window)をご覧ください。

# ダウンロード

(opens new window) (opens new window)

最新版の chartjs-plugin-streaming は、GitHub Releases (opens new window)からダウンロードできます。

chartjs-plugin-streaming.js（開発向けに推奨）
chartjs-plugin-streaming.min.js（製品向けに推奨）
chartjs-plugin-streaming.esm.js
chartjs-plugin-streaming.tgz（すべてのビルドを含む）
chartjs-plugin-streaming.zip（すべてのビルドを含む）

# 設置

# HTML

<script src="https://cdn.jsdelivr.net/npm/chart.js@3.3.2"></script>
<script src="https://cdn.jsdelivr.net/npm/luxon@1.27.0"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-luxon@1.0.0"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-streaming@next"></script>

重要

chartjs-plugin-streaming は、Chart.js、日付操作ライブラリ、対応するアダプターの後にロードする必要があります！

このプラグインを使用するためには、日付操作ライブラリとそれに対応するアダプターの両方が存在する必要があります。上の例では Luxon (opens new window) を使用していますが、利用可能なアダプター (opens new window)の中から選択することもできます。

script タグを使用する場合は、登録は必要ありません。

# モジュール

import {Chart} from 'chart.js';
import 'chartjs-adapter-luxon';
import ChartStreaming from 'chartjs-plugin-streaming';
Chart.register(ChartStreaming);

インポートされたプラグインは、グローバルに登録する必要があります。

重要

chartjs-plugin-streaming はインラインプラグインとしては機能しません。Chart.js › Using plugins (opens new window) も参照してください。

# 設定

プラグインオプションは3つのレベルで変更可能で、以下の優先順位で評価されます。

軸ごと：options.scales[scaleId].realtime.*
チャートごと：options.plugins.streaming.*
グローバル：Chart.defaults.plugins.streaming.*

例:

// すべてのチャートのデフォルトオプションを変更
Chart.defaults.set('plugins.streaming', {
  duration: 20000
});
const chart = new Chart(ctx, {
  options: {
    plugins: {
      // このチャートのすべての軸のオプションを変更
      streaming: {
        duration: 20000
      }
    },
    scales: {
      x: {
        type: 'realtime',
        // この軸のオプションのみを変更
        realtime: {
          duration: 20000
        }
      }
    }
  }
});

← はじめにオプション →