Pre loader

高性能的JavaScript图表库

通过SciChart的JavaScript图表库,为您的JS应用程序找到最佳解决方案。现已更新至SciChart.js v5。

SciChart.js 是一款专为实时应用程序设计的高性能 JavaScript 图表库,适用于大数据交易平台、科学仪表盘、遥测系统以及长期运行的监控应用程序等场景。

与其他库不同,SciChart 的设计重点在于可扩展性。借助 Visual Xccelerator™ 引擎,它能够实现极坐标图、弧形热力图和流式仪表盘等高级可视化功能。

专为专业级应用程序打造的 SciChart,通过 WebAssembly 提供性能优化、丰富的图表类型以及精细的自定义功能。即使渲染超过 1 亿个数据点,也能以 60 FPS 的帧率运行,确保仪表盘持续稳定运行而不崩溃。

有了 SciChart.js v5,您再也不必在速度与灵活性之间做出取舍。

10000+

0+

全球客户

1000000+

0+

最终用户

90%

0%

由世界顶级医疗科技公司 SciChart 提供支持

250+

0+

研究伙伴

50%

0%

财富 500 强公司使用 SciChart

从第一天起就充满信心地构建实时 JavaScript 图表

Get your real-time JavaScript charts up and running in under 2 minutes with production-ready templates, boilerplates, tutorials, and AI-powered support for everything from rapid prototyping to enterprise development.

不需要 WebAssembly 配置,不需要复杂的包装器。只是简单、现代的代码。

厌倦了过时的文档和不成熟的 GitHub 示例?

GitHub 模板可用于您的框架,包括 React、Angular、Vue 和 Vanilla。即用型演示包含真实数据,可以立即克隆。此外,还提供具有完整 IntelliSense 功能的 TypeScript 支持。

提高数据仪表板性能

您可能正在构建一个必须注重性能的系统。从实时遥测和高频交易到 24/7 监控,大多数 JavaScript 图表库都无法承受这些负载。

SciChart 专为传统 JavaScript 图表库无法适应的高吞吐量、低延迟渲染环境而设计。

借助跨平台支持、无限灵活性和大数据处理性能,加速应用程序开发并开辟新的可能性。

使用 GPU 加速的 WebAssembly 引擎以 60 FPS 渲染数百万个数据点。即使是具有 1 亿个点的仪表板也能连续工作数天,不会崩溃或卡顿。

与您一起成长的 JavaScript 图表库

无论您是创建第一个数据可视化还是构建关键业务仪表板,SciChart JS 都会随着您的成长而不断发展。

SciChart 允许您实时绘制数亿个数据点,从而实现无限规模。我们还致力于不断改进我们的 JavaScript 图表库,以满足不断变化的性能和平台要求。

专为需要稳定性、长时间运行、可预测内存使用以及支持企业环境中的部署的生产环境而设计。

提供缩放、平移、橡皮筋缩放、十字准线、图例等功能。利用内置过滤器和覆盖动画来实现长时间运行或复杂的应用程序。

部署到浏览器、Electron、Node.js 渲染或跨平台应用程序。只需将相同的核心引擎嵌入到 React、Angular、Vue 或 Vanilla JS 中即可。无需包装纸。

Fast support from SciChart AI and development team

With SciChart, you’ll be dealing with real engineers, not anonymous forum users. Whether you’re debugging your dashboards or improving performance, our team is here to help.

如果您在修改图表或进行复杂的自定义时遇到困难,请分享您的尝试,我们将提出解决问题的建议。

SciChart AI 可以立即解决常见问题,而无需等待工程师响应,但当您想直接与人工交谈时,我们随时可以为您服务。

Reviews.ioCapterraG2

通过高级自定义功能为数据可视化开辟新的可能性

您可以控制每个细节,包括轴、刻度线、网格线、光标、工具提示、图例、手势、绘图顺序等。

使用文本、区域、形状或自定义 HTML/SVG 覆盖图表,并使用线条和方框对其进行注释以突出显示重要点。
从标准“浅色”、“深色”和“电动”主题中进行选择,或以像素精度定义您自己的主题。

构建自定义 UI 仪表板,完全控制布局、事件、手势和叠加。

使用图表修改器 API 扩展您的功能,以流式传输来自 WebSocket 或 REST 的实时数据,并在悬停或单击时对样式、数据或过渡进行动画处理。

触手可及的无限图表可能性

SciChart.js 支持 70 多种 2D、3D 和极坐标 JavaScript 图表类型,并包含其他库中很少见的高级和专业可视化功能。

SciChart.js 提供高级图表类型,包括灵活的线条、三角形和矩形系列,适用于笛卡尔和极坐标系中几乎任何类型的可视化。

除了常见的图表(折线图、柱状图、水平条形图)外,我们还提供专门的图表类型,例如瀑布图、误差条图、脉冲图、热图、等高线图、矢量场、极坐标和雷达图。此外,高级电弧热图可用于地理空间和科学数据,包括 choroplace 地图。

想要加倍努力吗?使用表面网格、点云、3D 气泡图和 3D 柱形图实现真正的 3D 表示,这在 JavaScript 图表库中很少见。

如何启动 SciChart.js

查看下面的有用资源。立即开始并轻松找到您正在寻找的答案。

响应迅速的五星级技术支持

通过我们的五星级技术支持协议,我们的目标是在一个工作日*内(通常更快)回复所有支持请求。

了解更多
通过 AI 助手立即获得答案

向我们的 AI 助手询问有关 SciChart 的任何信息。我马上回复你!

了解更多
知识渊博的支持论坛

我们已在公共支持论坛中回复了近 4,000 个支持请求,因此您永远不会得不到答复。

了解更多
广泛的文档

对于如何充分利用 SciChart 的专家指导,我们在所有平台上都有数千页的支持文档。

了解更多
チュートリアルとビデオ

我们定期更新的 YouTube 频道让您了解可能发生的事情并回答常见问题。

了解更多
数百个图表示例

超过 350 个图表示例将为您提供良好开端所需的知识。

了解更多

開発を加速。さらなる拡張。乗り換え不要。

始め方は簡単です。当社の無料コミュニティ版を使えば、数百ものデモや、実際のコードサンプル付きの詳細なドキュメントにアクセスできます

今すぐSciChart.js V5をお試しください

必要なJavaScriptチャートデモがすべてここに

SciChartの実際の動作をご覧ください。リアルタイム更新、高度なチャートタイプ、そして完全にインタラクティブなJavaScriptチャートダッシュボードを備えた、本番環境でもすぐに使えるライブデモをご体験ください。

お客様の声とレビュー

star starstarstarstarstar 4.9 Average - 425 Reviews
G2 starstarstarstar 4.7 Average - 9 Reviews
G2 starstarstarstar 4.4 Average - 4 Reviews

SciChartのチャートライブラリは、世界中の何千人もの開発者から信頼されており、製薬、石油・ガス、医療、計測機器、防衛、航空宇宙、モータースポーツ、プロセスオートメーション、鉱業、投資銀行、トレーディングなど、90カ国以上の多様な業界のお客様にご利用いただいています。SciChartのJavaScriptチャートライブラリをご利用いただいたお客様の声をご覧ください。

高度なJavaScriptチャートAPI:拡張性とカスタマイズ性に優れる

SciChartのJavaScriptチャートAPIは、数千人の開発者やエンドユーザーからのフィードバックをもとに、長年にわたり改良を重ねてきました。当社のチャートAPIは驚くほど豊富な機能を備えており、チャートコントロールを自由に拡張、カスタマイズ、あるいは思い通りに調整することが可能です。

注釈
アニメーショ
軸API
軸の種
チャートシリーズAPI
カーソルとツールチッ
データラベ
データAP
ドキュメントとヘル
フィルターとデータ変換 AP
複数のチャートのリン
Retina のサポートと DP
シリアル化とビルダー AP
選択とヒットテス
テーマ設
ナレーション、アクセシビリテ
ズーム/パン

注釈 API の機能

注釈を使用すると、Xy座標または相対座標(%)で、チャート上に任意の図形、マーカー、テキスト、または線を配置できます。

  • 注釈(マーカー)の種類
    • LineAnnotation
    • BoxAnnotation
    • TextAnnotation (テキスト / ラベル)
    • VerticalLineAnnotation (ドラッグ可能な軸マーカー付き線)
    • HorizontalLineAnnotation(ドラッグ可能な軸マーカー付き線)
    • AxisMarkerAnnotation(軸上のテキストまたは画像)
    • CustomAnnotation(チャート上に配置された任意のSVGシェイプ)
    • [NEW] ArcAnnotation(直交座標または極座標チャート上の円弧)
    • [NEW] PolarPointerAnnotation(ゲージ用のポインター)
  • アノテーション配置API
    • Xyデータ値での絶対配置、SciChartが位置を自動的に更新
    • 相対配置(例:上部5%、左側10%)
    • ピクセル単位の配置(例:上部:20px、左側:40px)
    • 系列の上、または下(背景として)への配置
  • 注釈インタラクション API
    • マウスによるドラッグ/サイズ変更(オプション)
    • ドラッグおよびサイズ変更時のイベント(コールバック)
    • 表示/非表示(可視性の変更)

注釈ドキュメントを参照

Animations API の機能

  • シリーズ起動アニメーション
    • 初回読み込み時の4種類のアニメーション
    • ウェーブ、スイープ、フェード、スケール
    • 遅延、持続時間、およびイージング関数をカスタマイズする
  • スタイルの遷移アニメーション
    • グラフの系列でスタイルの遷移をアニメーション化する
    • ストロークの太さ、ストロークの色、塗りつぶしのアニメーション
    • ポイントマーカーのスタイルをアニメーション化する
    • ホバー時や選択時のスタイルをアニメーションさせるのに使用できます
    • 遅延、持続時間、およびイージング関数をカスタマイズする
  • データセットのアニメーション
    • あるデータセットから別のデータセットへとアニメーションさせるのに使用できます
    • すべてのシリーズXyの点は、データセットAからBへと補間されています
    • スタイルアニメーションと組み合わせて使用できます
    • ディレイ、持続時間、イージング関数をカスタマイズする
  • 一般的なアニメーション
    • チャート上のDOM要素、マーカー、オーバーレイなど、文字通りあらゆる要素をアニメーション化できます
    • axis.visibleRange の変更をアニメーション化し、ズームやパンを制御します
    • 遅延、持続時間、およびイージング関数をカスタマイズする

アニメーションのドキュメントを参照

Axis API の機能

  • 軸の配置
    • チャートの左・右・上・下に、X軸とY軸を無制限に複数配置可能
    • 軸をチャートの内側、外側、または中央に配置可能
    • 石油・ガス業界向けチャートの回転(縦型チャート)
    • 軸の縦または横の積み重ねレイアウト
  • 軸のタイトル、ラベル
    • 軸タイトルおよび軸ラベルの書式設定のカスタマイズ
    • ズーム時にラベルの書式設定を動的に調整
    • 回転した軸ラベルおよび画像ラベルに対応
    • ラベルでの科学表記または工学表記(例:1.23E5 または 1.23⁵)に対応
  • 軸のスタイル設定、構成
    • グリッド線、目盛、ラベル、帯の表示/非表示を切り替え可能
    • TickProvider を使用して軸のグリッド間隔を精密に設定可能
    • 軸の境界線、背景、グリッド線、目盛、ラベルのスタイル設定
  • 軸のその他のAPI
    • 特定の軸での自動範囲設定(データの自動調整)
    • 軸の表示/非表示を切り替え、または動的に軸を追加/削除する
    • リンクされたチャート間で軸のサイズを同期する
    • プログラムによる軸のピクセル-データ変換 API
    • axis.visibleRangeをプログラムで設定・取得、または範囲変更時に通知を受ける

軸のドキュメントを参照

軸の種類

  • 数値軸
    • 整数、浮動小数点数
    • 小数点以下の桁数や、ラベル形式の接頭辞/接尾辞をカスタマイズする
    • 値軸タイプ(X値を用いた測定)
  • DateTimeNumericAxis
    • Unixタイムスタンプを日付として表示するNumericAxisのサブタイプ
    • 最初から用意されている日付・時刻の表示形式から選択できます
    • ズーム時に日付・時刻の表示形式を動的に変更し、詳細を表示する
  • 対数軸
    • 整数、浮動小数点数
    • Log2、LogE、Log10 に対応
    • 科学表記法または工学表記法(例:1.23E5 または 1.23⁵)
    • 主要なグリッド線は対数スケールに従います
    • 小目盛線は、線形または対数スケールに従う
  • カテゴリ軸
    • X-インデックスを用いた特殊なX軸タイプの測定
    • データの欠落部分を補うために使用できます
    • 小数点以下の桁数やラベルの書式をカスタマイズする
    • Unixタイムスタンプを日付形式に変換する
  • [NEW] PolarNumericAxis
    • 極座標グラフにおける整数および浮動小数点数の値
  • [NEW] 極座標軸
    • 極座標グラフにおけるXインデックスを使用した特殊なX軸の測定方法

「軸の種類」のドキュメントを参照

チャート・シリーズ API

  • すべての 2D チャートタイプおよび極座標のサポート
    • Y=NAN によるシリーズ内のギャップ
    • Y=NAN によるシリーズ内の閉じた線
    • ポイントごとの色付けのためのPaletteProvider API
    • シリーズの表示/非表示
    • シリーズの選択/選択解除
    • データラベル
    • メタデータ(Xyポイント上のJSオブジェクト)
    • ヒットテスト(マウスがポイント上にあるかどうかの判定用プログラムAPI)
  • すべての3Dチャートタイプに対応
    • メタデータ(Xyポイント上のJSオブジェクト)
    • ヒットテスト(マウスがポイント上にあるかを確認するプログラムAPI)
    • ポイントごとの着色のための頂点着色

チャート・シリーズに関するドキュメントを参照

カーソル/ツールチップ機能

  • カーソル編集
    • マウス操作に合わせて動く十字線(オプションで縦線・横線を表示可能)
    • 十字線上の軸ラベル(オプション)
    • 十字線の横に表示される、設定可能なツールチップ(オプション)
    • シリーズのデータポイントにカーソルを合わせると、オプションのアクティブ凡例が表示される
  • ロールオーバー修飾子
    • マウスの動きを追跡する垂直線
    • ホバー対応トラックボールとアクティブなツールチップ
    • 縦線の横に表示される、設定可能なツールチップ(オプション)
  • VerticalSliceModifier
    • データを分割する垂直線をドラッグして配置する
    • 線は、データと系列が交差する箇所にツールチップを表示します
  • ツールチップ関連の各種API
    • ホバー時にツールチップの内容をカスタマイズ可能
    • Y軸に最新の系列値を表示する
    • テンプレート化可能な、アクティブなチャートの凡例
    • ビジネスオブジェクト(メタデータ)をツールチップに渡す
    • アプリケーションのスタイルに合わせてツールチップをカスタマイズする

「カーソル/ツールチップ」のドキュメントを参照

DataLabels API の機能

  • 固定WebGL Xyデータポイントラベル
    • 組み込みのデータラベルは、Xy座標上のデータポイントに配置できます
    • WebGLを使用してラベルを描画することで、数千個のラベルでも優れたパフォーマンスを実現
  • データラベルの書式設定
    • 数値の精度やテキスト書式設定ルールに基づいてデータラベルをフォーマットする
    • データポイントの上または下にラベルを表示する
    • カスタム複数行ラベルは、データポイントからX、Y、またはメタデータを出力します
  • データラベルの絞り込み
    • スキップモード/カリングモードは、重複するデータラベルを検出し、非表示にします
    • データラベルの表示/非表示を切り替える

DataLabelsのドキュメントを参照

データAPIの機能

  • 動的なデータ更新
    • Append、Insert、Update、Remove、Clear 関数を使用してデータを動的に更新する
    • 古いデータのスクロールや削除を行うための、組み込みのFIFO(先入れ先出し)モード
    • 心電図/ラップアラウンドチャート用の内蔵スイープモード
    • 高性能アプリケーション向けの大量更新に対応
  • データ形式
    • ビッグデータおよび高性能が求められるアプリケーション向けに最適化されたデータ構造
    • Xy座標をJSオブジェクトでタグ付けし、その座標にメタデータを表示できるようにします
    • パイプライン全体でFloat64の完全な精度をサポートしています
    • Unixタイムスタンプによる日付・時刻に対応しています
  • レスポンシブなJavaScriptチャート
    • プロパティやデータが変更された際にグラフを再描画し、グラフが自動的に更新されるようにする

DataSeriesのドキュメントを参照PointMetadata APIのドキュメントを参照

ドキュメントとヘルプリソース

「はじめに」のリソースをご覧ください

Filters API の機能

  • レンダリング前のデータの変換と加工
    • フィルターを使用すると、データ系列を関数や変換と連鎖させることができます
    • 基となるデータが更新されると、フィルターが再計算されます
  • 組み込みフィルター
    • シリーズやグラフの拡大・縮小およびオフセット(線形変換)
    • 直線トレンドライン
    • 移動平均
    • 比率(シリーズA/B)
    • スプライン補間
  • カスタムフィルター
    • カスタム関数を作成する
    • フィルターから集計まで、あらゆるものが対象となります
    • データをその場で変換する

「Filters API」のドキュメントを参照

マルチチャート・リンキングAPIの機能

  • マルチチャート
    • チャートは

      内に作成されます

    • WebGLのコンテキスト制限に引っかからずに、Webページ上で無制限にチャートを表示する
    • グループ内の複数のグラフを同期する
    • ズームとパンを同期する
    • カーソルとツールチップを同期する
    • 軸のサイズを同期する
  • サブチャート
    • サブチャート API – パフォーマンス向上のために、同じキャンバス上にチャートをグループ化
    • 複雑な視覚化が可能 – チャート内のチャート

「チャートのリンク」のドキュメントを参照

RetinaディスプレイのサポートとDPI機能

  • モニターのDPIに対応
    • MacBook Retinaへの対応
    • Windowsの高DPI対応
    • 高解像度ディスプレイでは、線やストローク、図形がより鮮明でくっきりと表示されます
    • テキストはより高い解像度で表示されます
  • ブラウザのズームに対応
    • ブラウザのズーム機能(Ctrl + マウスホイール)
    • テキストはブラウザのズームに合わせて拡大・縮小されます(アクセシビリティのため)
    • ブラウザのズーム率に応じて、ストロークの太さ(線幅)が増加します

このDPI Docs

シリアライズ / ビルダー API の機能

  • 開発者向けのAPI選び
    • SciChart.js には 2 つの API が付属しています
    • プログラムAPIを使えば、コードでグラフを作成できます
    • JSON Builder API を使用すると、JSON や JavaScript オブジェクトを使ってグラフを定義できます
  • JSON Builder API
    • チャート全体を、コード、またはJSON/JavaScriptオブジェクトのいずれかで定義します
    • 軸、系列、レイアウトなどのグラフの構成要素のみを定義する
    • データをJSONに統合するか、後で送信してください
    • JSON を使用してチャートを作成したら、コード内でそのチャートを操作できます
  • シリアライズ
    • チャートおよびチャートの一部をJSON形式でシリアライズする
    • JSONからチャートおよびチャートパーツをデシリアライズする

シリアライゼーションのドキュメントを参照

Selection API の機能

  • シリーズ選択編集
    • マウスまたはプログラムでシリーズを選択する
    • シリーズ選択時/ホバー時のイベント/コールバック
    • シリーズを選択またはホバーした際に、スタイルや状態を変更する
  • データポイントの選択・編集
    • マウスまたはプログラムで個々のデータポイントを選択する
    • 単一選択または複数選択に対応しています
    • データポイントの選択時のイベント/コールバック
    • 選択したデータポイントの一覧を取得する
    • 選択したデータポイントの外観を変更する
  • ヒットテストAPI
    • マウスへの最寄点を取得する / Hit-Test API を使用してポイント上にあるかを確認する
    • ChartModifier API と組み合わせて使用し、MouseDown、MouseMove、MouseUp、Touch をオーバーライドして、チャート上で独自の動作を実現します

「選択ドキュメント」を参照ヒットテストのドキュメントを参照

Theme API の機能

  • 選べる3つの素晴らしいテーマ
    • テーマのカラーパレットに基づいて、シリーズの色を自動生成する
    • カスタムテーマを簡単に作成
    • 組み込みテーマを引き継ぎ、一部のプロパティを変更する
  • スタイリングとカスタマイズ
    • コード内でスタイルを上書きする(例:背景色、グリッド線、文字色、系列の線と塗りつぶし)
    • 透明な背景に対応しています
    • グラフの各要素(系列、軸、ラベル、凡例、目盛線)の表示/非表示を切り替える
    • チャートコンポーネント、RenderableSeries、ツールチップ、凡例などのスタイリング
  • モダンなスタイルで、見栄えのするグラフを作成しましょう!

「テーマ」のドキュメントを参照

アクセシビリティAPIの機能

  • 視覚的アクセシビリティ
    • SpeechSynthesisUtterance / Web Speech API による VoiceOver に対応しています
    • データポイントにVoiceOverを追加する
    • 軸ラベルにVoiceOverを追加する
    • 「テーマ」設定で色やコントラストを変更できます
  • キーボードによる操作
    • 「+/-」キーでのスクロールなど、独自のキーボード操作を作成する
  • その他
    • フォントおよびシリーズ拡大縮小機能によるブラウザのズームに対応

「テーマ」のドキュメントを参照

ズーム/パン API の機能

  • 組み込みのズーム、パン動作
    • RubberBandXyZoomModifier: 矩形をドラッグしてズームアニメーションを実行
    • X/YAxisDragModifier: 軸のドラッグによるパンまたはズーム
    • MouseWheelZoomModifier: マウスホイールによるパンまたはズーム
    • PinchZoomModifier: ピンチズームを含むタッチスクリーン対応
    • ZoomExtentsModifier: ダブルクリックでズーム範囲をアニメーション表示
    • ZoomPanModifier: マウスドラッグによる水平または垂直方向のパン。ピンチズームもサポート
  • その他のズーム/パン API
    • スクロールバーおよび概要表示コントロール
    • プログラムによる axis.visibleRange の取得/設定またはアニメーション化
    • プログラムによるパンや拡大縮小を行うAPI
    • カスタムマウス操作拡張機能の開発のための強力なChartModifier API

ChartModifierのドキュメントを参照

JavaScriptチャートライブラリのライセンス取得が簡単に

優れたテクノロジーに、不透明な価格設定があってはなりません。ビジュアルガイドとAIサポートによりすべてを簡素化しました。そのため、何が得られるのかが常に明確です。

ライセンスを取得する

よくある質問

icon

SciChart.js と他の JavaScript チャート ライブラリの違いは何ですか?

SciChart.js は、GPU アクセラレーションを備えた WebAssembly を利用したエンジン上に構築されており、60 FPS で最大 1 億のデータ ポイントのリアルタイム レンダリングを可能にします。これは、ほとんどの JavaScript チャート ライブラリでは維持できないパフォーマンスです。

icon

SciChart.js はリアルタイム データやストリーミング データを処理できますか?

はい。 SciChart.js は、テレメトリ、取引、24 時間年中無休の監視ダッシュボードなどのリアルタイムおよびストリーミング シナリオ向けに設計されています。

icon

SciChart.js はエンタープライズでの運用用途に適していますか?

はい。 SciChart.js は、長いランタイム、予測可能なメモリ使用量、およびエンタープライズ展開のサポートを必要とする運用環境向けに構築されています。

今すぐ SciChart を試してください

トライアルを開始して、当社が選ばれる理由を発見してください
世界中の要求の厳しい開発者の

今すぐ無料で始めましょうデモを見る

ご質問はありますか?

商用目的でのグラフの使用について詳しく知りたいですか?企業としてご連絡いただく場合でも、小規模なスタートアップ企業としてご連絡いただく場合でも、当社の技術営業チームが販売前のお問い合わせをサポートいたします。

お問い合わせ