高性能なJavaScriptチャート＆グラフライブラリ

注釈 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のドキュメントを参照

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

• ドキュメント
  • 手書きのドキュメントページが数百ページ
  • 多くのドキュメントに埋め込まれたCodePenがあり、ブラウザ上でコピーして編集できます
  • GitHubに公開されたすべてのドキュメントサンプルのソースコード
• はじめに：リソース
  • はじめにガイド
  • ソースコード付きの100以上の例／デモ
  • npm開発者向け動画チュートリアル
  • vanilla JS 開発者向けチュートリアル
  • ライブラリ全体のTypedoc
  • 主要なフレームワーク（React、Vue、Angular）向けの標準的なデモ
  • 公式 scichart-react React コンポーネント
• 継続的デリバリー
  • npm や JSDelivr への定期的な公開を行いながら、積極的に開発が進められています
  • オンライン 変更履歴
• ヘルプ＆サポート
  • コミュニティ掲示板
  • プレミアム会員向けサポートデスク

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

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のドキュメントを参照