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 轴", growBy }));
  sciChartSurface.yAxes.add(new NumericAxis(wasmContext, { axisTitle: "Y 轴", 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

如果尚未进行，请将 SciChart.js 和 scichart-react 添加到 React 应用中。

npm install scichart
npm install scichart-react

步骤 2：部署 Wasm 文件

SciChart.js 使用 WebAssembly 文件，您需要分发这些文件。最简单的方法是将 wasm 文件从 node_modules/scichart/_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 轴", growBy }));
  sciChartSurface.yAxes.add(new NumericAxis(wasmContext, { axisTitle: "Y 轴", 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 上打开

若要在 Angular 应用中使用 npm 集成 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 中，需将 WASM 文件从 node_modules/scichart/_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で開く