SciChart JS v4 の
入門

純粋なJavaScript環境（npm、webpack、TypeScriptを使用しない）でSciChart.jsを使用するには、以下の手順を実行してください。

注：npm および webpack の使用を推奨します。左側のタブにある他の例もご確認ください。

手順 1：アプリ内で index.min.js を参照する

HTML ページに scichart.js を読み込むスクリプトを追加します。例：

<!-- 最新バージョンを参照します。本番環境では推奨されません！ -->
<script src="https://cdn.jsdelivr.net/npm/scichart/index.min.js" crossorigin="anonymous"></script>

または、

<!-- 特定のバージョンを参照します。本番環境での使用を推奨 -->
<script src="https://cdn.jsdelivr.net/npm/scichart@4.0/index.min.js" crossorigin="anonymous">
</script>

ステップ 2: SciChart.js の型をインポートする

エクスポートされたすべての型は、変数 SciChart に格納されています。必要な型をインポートするには、次のコードを使用します:

// 必要な型をインポートします。後で追加することも可能です
const { 
    SciChartSurface,
    NumericAxis,
    FastLineRenderableSeries,
    XyDataSeries,
    EllipsePointMarker,
    SweepAnimation,
    SciChartJsNavyTheme,
    NumberRange,
    MouseWheelZoomModifier,
    ZoomPanModifier,
    ZoomExtentsModifier
} = SciChart;

ステップ 3: チャートを作成する

これで SciChart を使用する準備が整いました！次のようなコードで最初のチャートを作成してみましょう：

const initSciChart = async () => {

  // SciChartSurface を初期化します。await を忘れないでください！
  const { sciChartSurface, wasmContext } = await SciChartSurface.create("scichart-root", {
    theme: new SciChartJsNavyTheme(),
    title: "SciChart.js First Chart",
    titleStyle: { fontSize: 22 }
  });

  // growBy パディングを使用した XAxis と YAxis を作成
  const growBy = new NumberRange(0.1, 0.1);
  sciChartSurface.xAxes.add(new NumericAxis(wasmContext, { axisTitle: "X Axis", growBy }));
  sciChartSurface.yAxes.add(new NumericAxis(wasmContext, { axisTitle: "Y Axis", growBy }));

  // 初期データを含む線グラフシリーズを作成
  sciChartSurface.renderableSeries.add(new FastLineRenderableSeries(wasmContext, {
    stroke: "steelblue",
    strokeThickness: 3,
    dataSeries: new XyDataSeries(wasmContext, {
      xValues: [0,1,2,3,4,5,6,7,8,9],
      yValues: [0, 0.0998, 0.1986, 0.2955, 0.3894, 0.4794, 0.5646, 0.6442, 0.7173, 0.7833]
    }),
    pointMarker: new EllipsePointMarker(wasmContext, { width: 11, height: 11, fill: "#fff" }),
    animation: new SweepAnimation({ duration: 300, fadeEffect: true })
  }));

  // ズームとパンを表示するためのインタラクション修飾子を追加
  sciChartSurface.chartModifiers.add(
    new MouseWheelZoomModifier(), 
    new ZoomPanModifier(), 
    new ZoomExtentsModifier()
  );
};

initSciChart();

これが表示されるはずです！

デフォルトでは、index.min.jsが読み込まれると、SciChartはSciChartSurface.useWasmFromCDN()を呼び出して、CDNからWebAssemblyファイルをロードします。ローカルデプロイを含むその他のオプションはこちらをご覧ください。

Codepenで編集するご質問はありますか？

npm と webpack を使用した React アプリで SciChart.js を利用するには、公式の scichart-react ライブラリ を使用することをお勧めします。

ステップ 1: SciChart.js と scichart-react をインストールする

まだ行っていない場合は、ReactアプリケーションにSciChart.jsとscichart-reactを追加してください。

npm install scichart
npm install scichart-react

ステップ 2: Wasm ファイルのデプロイ

SciChart.js は WebAssembly ファイルを使用しており、これらを配信する必要があります。最も簡単な方法は、node_modules/scichart/_wasm フォルダから出力フォルダに wasm ファイルをコピーすることです。

例: webpack.config.js を使用する場合:

 plugins: [
    new CopyPlugin({
      patterns: [
        { from: "src/index.html", to: "" },
        { from: "node_modules/scichart/_wasm/scichart2d.wasm", to: "" },
        // 3D チャートを使用する場合のオプション
        { from: "node_modules/scichart/_wasm/scichart3d.wasm", to: "" },
      ],
    })
  ],

注: 導入を簡略化するために、 CDNからwasmを読み込む 他の方法も利用可能です

ステップ3: チャートの作成

その後、次のようにSciChartSurfaceを作成する関数を作成できます。

import {
  SciChartSurface,
  NumericAxis,
  FastLineRenderableSeries,
  XyDataSeries,
  EllipsePointMarker,
  SweepAnimation,
  SciChartJsNavyTheme,
  NumberRange
} from "scichart";

async function initSciChart() {
  // SciChartSurfaceを初期化します。awaitを忘れないでください！
  const { sciChartSurface, wasmContext } = await SciChartSurface.create("scichart-root", {
    theme: new SciChartJsNavyTheme(),
    title: "SciChart.js First Chart",
    titleStyle: { fontSize: 22 }
  });

  // growBy パディングを使用して XAxis と YAxis を作成
  const growBy = new NumberRange(0.1, 0.1);
  sciChartSurface.xAxes.add(new NumericAxis(wasmContext, { axisTitle: "X Axis", growBy }));
  sciChartSurface.yAxes.add(new NumericAxis(wasmContext, { axisTitle: "Y Axis", growBy }));

  // 初期データを含む線グラフシリーズを作成
  sciChartSurface.renderableSeries.add(new FastLineRenderableSeries(wasmContext, {
    stroke: "steelblue",
    strokeThickness: 3,
    dataSeries: new XyDataSeries(wasmContext, {
      xValues: [0,1,2,3,4,5,6,7,8,9],
      yValues: [0, 0.0998, 0.1986, 0.2955, 0.3894, 0.4794, 0.5646, 0.6442, 0.7173, 0.7833]
    }),
    pointMarker: new EllipsePointMarker(wasmContext, { width: 11, height: 11, fill: "#fff" }),
    animation: new SweepAnimation({ duration: 300, fadeEffect: true })
  }));

  return { sciChartSurface };
} 

ステップ 4: React コンポーネントの作成

チャートは SciChartReact コンポーネントを使用して初期化できます。これにより、アンマウント時の削除を含むコンポーネントのライフサイクル全体が処理されます。

function App() {
  return (
    <div className="App">
      <SciChartReact initChart={initSciChart} 
          onInit={(initResult) => console.log(initResult.sciChartSurface.id + ` が作成されました`);
          onDelete={(initResult) => console.log(initResult.sciChartSurface.id + ` が削除されました`);
          style={{ maxWidth: 900 }} />
    </div>
  );
}

例の動作確認

さらに詳しく調べるには、Githubで完全な例を入手してください。

その他の使用例はこちらをご覧ください：

• ブログ記事：SciChart-Reactの紹介
• チュートリアル：scichart-reactと設定オブジェクトを使用したプロジェクトのセットアップ
• SciChart-React GitHubリポジトリ.

npm install
npm start

GitHubで開く

npm を使用して Angular アプリで SciChart.js を利用するには、公式のラッパーである SciChart.Angular を使用できます。

以下の手順を実行してください：

手順 1: SciChart.js と SciChart.Angular のインストール

まだインストールしていない場合は、SciChart.js と SciChart. AngularをAngularアプリケーションに追加してください。

npm install scichart scichart-angular

ステップ 2: Wasm ファイルのデプロイ

import { SciChartSurface, SciChart3DSurface } from "scichart";
// ...
SciChartSurface.loadWasmFromCDN();
SciChart3DSurface.loadWasmFromCDN();

Angularでは、node_modules/scichart/_wasmフォルダから出力フォルダへWASMファイルをコピーします。Angularバージョン20では、angular.jsonファイルを修正することでこれを行うことができます

"assets": [
  // ...
  {
    "glob": "scichart2d.wasm",
    "input": "node_modules/scichart/_wasm",
    "output": "/"
  },
  {
    "glob": "scichart3d.wasm",
    "input": "node_modules/scichart/_wasm",
    "output": "/"
  }
],

注: 導入を簡素化するために、 CDNからwasmを読み込む 他の方法も利用可能です

ステップ3: チャートの初期化

設定アプローチ

HTML:

  <div class="chart-wrapper" style="width: 600px; height: 300px;">
    <scichart-angular [config]="config"></scichart-angular>
  </div> TS:

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { ScichartAngularComponent } from 'scichart-angular';

@Component({
  selector: 'app-basic-chart-config',
  standalone: true,
  imports: [CommonModule, FormsModule, ScichartAngularComponent],
  templateUrl: './basic-chart-config.component.html',
  styleUrl: './basic-chart-config.component.css'
})
export class BasicChartConfigComponent {
  config = {
    // ...
  };
}

InitChart関数によるアプローチ

次のように、SciChartSurfaceを初期化する関数を作成します:

HTML:

  <div class="chart-wrapper" style="width: 600px; height: 300px;">
    <scichart-angular [initChart]="drawBasicChart"></scichart-angular>
  </div> TS:

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { ScichartAngularComponent } from 'scichart-angular';
import { NumericAxis, SciChartSurface } from 'scichart';

@Component({
  selector: 'app-basic-chart-init',
  standalone: true,
  imports: [CommonModule, FormsModule, ScichartAngularComponent],
  templateUrl: './basic-chart-init.component.html',
  styleUrl: './basic-chart-init.component.css',
})
export class BasicChartInitComponent {
  public drawBasicChart = async (rootElement: string | HTMLDivElement) => {
    const { wasmContext, sciChartSurface } = await SciChartSurface.create(rootElement);

    sciChartSurface.xAxes.add(new NumericAxis(wasmContext));
    sciChartSurface.yAxes.add(new NumericAxis(wasmContext));

    // ...

    return { sciChartSurface };
  };
}

例の動作確認

GitHubで完全なサンプルを入手し、さらに詳しく調べたり、3Dチャートの設定例を確認したりしてください。

npm install
npm start

GitHubで開く

SciChart.Angular を使用せずに SciChart.js を利用する場合

SciChart.Angular の使用を避けたい場合は、独自のラッパーを作成することを検討してください。
いくつかのヒントをご紹介します：

• scichart-angularの実装を確認してください
• こちらが、再利用可能な React ラッパーコンポーネントを作成するためのガイドです。そこに記載されているポイントのほとんどは、Angular にも適用可能です
• SciChart.Angular の使用を回避したボイラープレート例を参照してください

npm と webpack を使用して Electron で SciChart.js を利用するには、以下の手順を実行してください：

ステップ 1: SciChart.js のインストール

まだ行っていない場合は、React アプリケーションに SciChart.js を追加してください。

npm install scichart

ステップ 2: Wasm ファイルの配置

SciChart.js は WebAssembly ファイルを使用しており、これらを配信する必要があります。最も簡単な方法は、node_modules/scichart/_wasm フォルダから出力フォルダに wasm ファイルをコピーすることです。

例: webpack.config.js を使用する場合:

 plugins: [
    new CopyPlugin({
      patterns: [
        { from: "src/index.html", to: "" },
        { from: "node_modules/scichart/_wasm/scichart2d.wasm", to: "" },
      ],
    })
  ],

注: 開始を簡素化するために、 CDNからwasmを読み込む 他の方法も利用可能です

ステップ 3: チャートの作成

その後、次のようにSciChartSurfaceを作成する関数を作成できます。

import {
  SciChartSurface,
  NumericAxis,
  FastLineRenderableSeries,
  XyDataSeries,
  EllipsePointMarker,
  SweepAnimation,
  SciChartJsNavyTheme,
  NumberRange
} from "scichart";

async function initSciChart() {
  // SciChartSurfaceを初期化します。awaitを忘れないでください！
  const { sciChartSurface, wasmContext } = await SciChartSurface.create("scichart-root", {
    theme: new SciChartJsNavyTheme(),
    title: "SciChart.js First Chart",
    titleStyle: { fontSize: 22 }
  });

  // growBy パディングを使用した XAxis と YAxis を作成
  const growBy = new NumberRange(0.1, 0.1);
  sciChartSurface.xAxes.add(new NumericAxis(wasmContext, { axisTitle: "X Axis", growBy }));
  sciChartSurface.yAxes.add(new NumericAxis(wasmContext, { axisTitle: "Y Axis", growBy }));

  // 初期データを含む線グラフシリーズを作成
  sciChartSurface.renderableSeries.add(new FastLineRenderableSeries(wasmContext, {
    stroke: "steelblue",
    strokeThickness: 3,
    dataSeries: new XyDataSeries(wasmContext, {
      xValues: [0,1,2,3,4,5,6,7,8,9],
      yValues: [0, 0.0998, 0.1986, 0.2955, 0.3894, 0.4794, 0.5646, 0.6442, 0.7173, 0.7833]
    }),
    pointMarker: new EllipsePointMarker(wasmContext, { width: 11, height: 11, fill: "#fff" }),
    animation: new SweepAnimation({ duration: 300, fadeEffect: true })
  }));

  return sciChartSurface;
}

initSciChart(); 

サンプルを実行する

さらに詳しく調べるには、GitHubで完全なサンプルを入手してください。

npm install
npm start

GitHubで開く