LightningChart JS 新機能・リリースノート

追加された機能・改善点

• 凡例 (Legend) の刷新

  凡例の仕組みが完全に再構築されました。チャートのデータ表示を妨げない配置が可能になり、設定がよりシンプルかつ強力になりました。また、プラグインを使用して独自の凡例機能を追加することも可能です。

• ポイント ストローク API

  PointLineAreaSeries、PolarPointSeries、およびポイント マーカーで、境界線のストローク描画がサポートされるようになりました。setPointStrokeStyle メソッドで設定可能です。

• 軸タイトルの配置

  軸タイトルの配置オプションが改善され、従来の軸中心だけでなく、チャートの中央に配置するオプションなどが追加されました。

• 視覚品質の向上

  カーソル ポイント マーカーのデフォルト スタイルが透明な円に変更され、データ値の強調表示が改善されました。また、小さなチャートでのカーソル表示ロジックも改善されています。

• DataSetXY の刷新とパフォーマンス向上

  共有タイムスタンプ、個別のデータ ストレージ形式、データ マッピングにより、メモリ効率とパフォーマンスが大幅に向上しました。特にマルチチャネルのデータセットで効果を発揮します。

追加された機能

• ナノ秒のタイムスタンプ (Nanosecond timestamps)

  ナノ秒精度のタイムスタンプのサポートが追加され、より高精度な時間データの視覚化が可能になりました。

• HTML テキスト レンダリング

  HTML を使用したテキスト レンダリング機能が追加され、テキスト表示の柔軟性が向上しました。

• リアルタイム スクロール軸の改善

  リアルタイム スクロール軸の機能が強化され、新しい軸フィッティング モードが追加されました。

追加された機能

• 組み込みインタラクションの変更

  シームレスな開発エクスペリエンスを実現する新しい直感的なインタラクションを備えた LightningChart JS の最新バージョンをご紹介します。

  • ダブルクリックでズームイン・ズームインタラクション
  • チャート構造に基づいて選択された、自動的に組み込まれたスマート インタラクション スキーム
  • タッチスクリーンの操作性向上
  • スクロール軸アプリケーションでのより便利なインタラクション
• 新機能 setUserInteractions

  相互作用によって影響を受ける軸を選択します（X、Y、または両方）

  • デフォルトの外観を改善し、さまざまなユーザー インターフェースへの適応性を向上
  • Ctrl、Shift、または Altキーの組み合わせに基づく操作を有効にする
  • アプリケーション要件に応じてパンとズームの感度を調整します
  • ページネーション、ズームの復元、キーボードコントロール、3D軸の変更などの新しいインタラクションを探索します
• カスタム インタラクションの変更
  • 簡素化された API – 使い慣れた addEventListener / removeEventListener 構文に従うようになり、実装が簡単になりました。
  • デバイス間での一貫した操作 – これまでのマウス、タッチ、ドラッグ操作が、すべてのデバイス間で一貫しています。
  • 右クリックのサポート – contextmenu 操作オプションを改善するためのイベント処理が追加されました。
  • 拡張されたインタラクション トラッキング – グラフ タイトル、軸タイトル、マップ領域などが含まれるようになりました。
  • ドラッグ アンド ドロップ サポート – グラフ内の要素を移動したり、軸の交換やデータ ソースの追加などの外部 HTML 要素を統合したりできます。
• テキストシリーズ

  テキストを内部に表示するための、より効率的な新しい API により、ChartXY パフォーマンスと使いやすさが向上しました。ビューポート クリッピングをサポートし、テキストサイズと境界を調整するための便利なメソッドも提供しているため、多くのケースで chart.addUIElement() の代替として最適です。

• ChartXYレイアウト変更イベント

  新しい便利な API は、要素の構造、レイアウト、位置 ChartXY に関する詳細な情報を提供します。これは、静的なアスペクト比のアプリケーションや、軸などのチャート コンポーネントと UI 要素を揃える場合に特に役立ちます。

変更点

• 軸座標から最も近いものを解決: 新しいシグネチャにより、PointLineAreaSeries.solveNearest 軸座標に基づいて最も近いデータ ポイントを検索できるようになりました。以前は、クライアント座標からの解決のみがサポートされていました。
• ヒートマップとサーフェス シリーズの改良: XY ヒートマップシリーズは高精度軸へのアタッチメントをサポートするようになりました。これにより、UTC タイムスタンプをヒートマップ座標として直接使用できるようになり、時系列ヒートマップのユースケースがより便利になります。さらに、3D スクロール サーフェス シリーズに invalidateValues とメソッド getSampleCount が追加され、2D スクロール ヒートマップ シリーズの同様のメソッドと連携しました。これにより、2D と3D の視覚化の切り替えがシームレスになり、ストリーミング アプリケーションにおける 3D サーフェス シリーズの使い勝手が大幅に向上します。

追加された機能

• 新しく、リファクタリングされた Cursor APIを追加
  • マルチシリーズカーソル、3Dカーソルなどの新機能を追加。
  • 詳細は移行ガイドと docs > Features > Cursors を参照してください。
• 新しく、完全に再構築された GaugeChart
  • デフォルトの外観を改善し、さまざまなユーザーインターフェースへの適応性を向上。
  • 組み込みの値インジケーター機能、組み込みのニードル機能を追加。
  • 値に基づく背景のグローとゲージバーの色付けを追加。
  • APIが完全に変更されました。古いゲージチャートAPIから移行する場合は、移行ガイドを参照してください。
• 新しく、簡略化された SolveNearest APIを追加
• SeriesXY.setClipping を追加
  • スタック軸アプリケーションで、シリーズのレンダリングが所有軸の外にはみ出す以前の動作に戻すことができます。デフォルトは有効（true）です。
• PointShape.HollowCircle を追加
• Chart3D.setProjection を追加（ベータ版）
• 軸タイトルのユーザーインタラクションを追跡するためのイベントAPIを追加 (Axis.onTitleMouseEnter, ...)
• Axis.setTitlePosition を追加
• DataSetXY.alterSamples に x と y オプションを追加
• DataSetXY と PointLineAreaSeries が直接 Date オブジェクトまたは有効な日時文字列から x と y 座標を消費できるようになりました。
• FormattingFunctions.Scientific を追加
• EmptyTickStrategy.setCursorFormatter を追加
• CursorXY.setTickMarkersAllocateAxisSpace を追加
• CustomTick3D.setBackgroundFillStyle, setBackgroundStrokeStyle, setPadding を追加
• Chart3D.translateCoordinate 機能を追加して、3D軸座標をクライアントおよび相対座標系に変換できるようになりました。

変更点

• スタック軸に接続されたXYシリーズは、レンダリングが所有軸の外にはみ出さないようにクリッピングされるようになりました。
• Pie、Funnel、Pyramid チャートのレイアウトを強化しました。
• より現代的な外観のために、デフォルトのエリアシリーズ塗りつぶしスタイルを調整し、より多くの透明度を利用するようにしました。
• DateTime 軸の目盛り戦略ズーム範囲を改善しました。
• darkGoldとlightテーマのカーソルグリッドラインを調整し、よりコントラストを付けました。
• ウェブページ上で任意の draggable HTMLイベントがドラッグされたときに、LCJSドラッグイベントが停止するようになりました。
• デフォルトで DateTime の大きな目盛りの目盛り線を無効にしました。
• TreeMap チャートのソート順序を反転しました。

削除された機能

• DashboardOptions.disableAnimations, DashboardCellOptions.disableAnimations, CommonChartOptions.disableAnimations を削除
• Dashboard.pixelScale, Panel.pixelScale を削除
• HeatmapScrollingGridSeriesOptions.start, step を削除
• translatePoint, translatePoint3D を削除
• LightningChartOptions.sharedContextOptions.webgl を削除
• PublicEngine.scale を削除
• PublicEngine.clientLocation2Engine, engineLocation2Client を削除
• Chart3D.axes を削除
• Chart3D.world を削除
• SurfaceGridSeries3DOptions.start, step, end を削除
• SurfaceScrollingGridSeries3DOptions.start, step を削除
• TickStyleProperties.labelPadding を削除
• pointShape パラメータを受け入れる SpiderChart.addSeries の非推奨シグネチャを削除
• Axis.setTitleMargin, getTitleMargin を削除
• HeatmapGridSeriesOptions.start, step, end を削除

修正された問題

• チャートの何かが変更される前に、ブラウザのズームレベルの変更に時々調整されない問題を修正。
• ChartXYでシリーズが時々シリーズの背景の外に1〜2ピクセルはみ出す問題を修正。
• PointLineAreaSeries の自動最大サンプル数制御でのクラッシュを修正。
• 高精度軸での RectangleSeries のレンダリングエラーを修正。
• テキストオブジェクトが比較的多いアプリケーションで、テキストが奇妙な記号としてレンダリングされる1秒フレームの問題を修正。
• MapChart がデータのない地域を最初のLUTカラーで色付けし、フォールバックカラーを使用しない問題を修正。
• Dashboard 内の ZoomBandChart での "Cannot compare node with itself" クラッシュを修正。
• PointLineAreaSeries のY軸スクロールが1フレーム遅れる問題を修正。
• XYヒートマップとスクロールヒートマップシリーズが axisX または axisY オプションを受け入れない問題を修正。
• 複数のスタック軸に接続されている場合の ZoomBandChart のミスアライメントを修正。
• カスタム目盛りラベルのパディングが時々間違っている問題を修正。
• ストロークとエリアの両方が無効になっている場合でも、PointLineAreaSeries がズームアウト時にポイントを非表示にする問題を修正。
• ZoomBandChart が PointLineAreaSeries のポイントスタイルを完全に模倣していない問題を修正（回転、形状、サイズ）。
• 完全に同じ x を持つデータポイントのみが供給された場合の PointLineAreaSeries のクラッシュを修正。
• DataSetXY の追加メソッドが start と step オプションで正しく動作しない問題を修正。

追加

• スタック軸を追加 (ベータ版)
• TreeMapChart を追加
• ChartXY.swapAxes (ベータ版) を追加
• PointLineAreaSeries および PolarPointSeries マーカーの塗りつぶしスタイルに対する ImageFill のサポートを追加
• PointLineAreaSeries.setPointAlignment、getPointAlignment を追加
• 便利な軸ゲッタープロパティを追加 (ChartXY.axisX, xAxis, axisY, yAxis など)
• SeriesOptions.axisX、SeriesOptions.axisY を追加
• 便利なプロパティ SeriesXY.xAxis、SeriesXY.yAxis を追加
• DisposableEvents.isDisposedを追加
• LightningChart.layout を追加
• ChartComponent.setIconを追加 (ベータ)
• PointShape を使用できる場所ならどこでもアイコンを使用できる機能が追加されました。
• DataSetXY.fill、PointLineAreaSeries.fill メソッドを追加
• すべてのティック戦略に setTickStyle コンビニエンスメソッドを追加しました。
• DataSetXY.alterSamplesByID と PointLineAreaSeries.alterSamplesByID にオプションのパラメーターを追加しました: x, y, lookupValue, color, rotation
• Axis.setTitleMarginBefore、getTitleMarginBefore を追加
• Axis.setAutoRegionsEnabled を追加
• hasUIElementBackground 型ガードを追加しました。
• Color.toUint32を追加
• sliced chart slice styling API に slice パラメータを追加

削除

• EngineSettings.webgl を削除しました。

修正

• synchronizeAxisIntervals で軸がズームまたはパンできなくなるバグを修正しました。
• 時系列データを使用してズームイン/ズームアウトすると、PointLineAreaSeries ランタイム クラッシュの "無効な配列の長さ" が修正されました。
• 時系列のユースケースで、最初のデータポイントが追加されたときの長いスクロール アニメーションを修正しました。
• チャートが作成された後、ウィンドウ devicePixelRatio の変更に従っていないチャートを修正しました。
• PointLineAreaSeries は、データ ストリーミング テスト設定の一般的な無効なデータ供給パターンに対してより堅牢になりました。
• 固定 PointLineAreaSeries の個々のポイント サイズは、円の形をした低解像度です。
• 固定 PointLineAreaSeries.clear により、特定の状況下でシリーズが見えなくなります。
• ライトテーマでは見えない固定軸グリッド線。
• 極端なティックラインが表示されない問題を修正しました。
• 同じチャートを2回破棄しようとするとクラッシュする問題を修正しました。
• ホバー時のハイライトが無効になっているときに、マウスの移動時に自動カーソルが更新されないスライス チャート(円グラフ、ピラミッドグラフ、ファネル)を修正しました。
• アタッチされたコンポーネントが非表示のときに凡例が追加された場合、凡例ボタンが表示されない問題を修正しました。
• サイズまたは回転のみが変更された場合に alterSamples が何もしない問題を修正しました。
• toggleVisibilityOnClick が false の場合でも Legend エントリが非表示になる問題を修正
• BarChart が明示的に有効になっているか、少なくとも無効になっていない場合でも、アニメーションが無効になることがある問題を修正しました。

廃止

• LightningChartOptions.sharedContextOptions.webgl を廃止し、LightningChartOptions.webgl に置き換えました。
• 非推奨だった Axis.setTitleMargin, getTitleMargin

LightningChart JS の最新バージョン 3.4.0 では、新しいチャート タイプが追加され、パフォーマンスが向上されました。

3 種類のパレット ライン機能の追加

今回のリリースでは、X パレット ライン、Y パレット ライン、およびバリュー パレット ラインの 3 種類のパレット ライン機能が追加されました。

このような視覚化は、一般的に、ある閾値を超えた線を別の方法で描画したり、線のある領域を別の方法で描画したりすることが望まれます。
この視覚化タイプでは、ユーザーが提供する別のデータセット、または X/Y 座標に基づいて、色を動的に変更することができます。
X パレット ラインおよび Y パレット ラインのインタラクティブな例をご覧ください。

パレット ライン のカラーを使用しても、線分系列の視覚化のパフォーマンスに悪影響はありません。パフォーマンスは、LightningChart JS v3.4 で最も高い状態が続きます。

以下は、バリュー パレット ラインの例です。

インタラクト

新しい地理データの視覚化例の追加

地理データの視覚化の新しい可能性として、Google Static Maps API および LightningChart JS を一緒に使用して、地図の上に任意の XY データ 視覚化機能を追加することが可能です。

また、多次元データの視覚化を実現するマップ チャートと XY 機能を組み合わせたドリルダウン式の Covid-19 マップ ダッシュボードも追加されました。

インタラクト

最後に、マップ チャート上に XY の機能を表示するアニメーション化された Covid-10 接種率表を追加しました。

インタラクト

2D 折れ線グラフのデータ ギャップへの対応

データの視覚化において、データ ギャップは非常によく使われる言葉です。例えば、取引では、一般的に証券会社が閉まっている時間帯はデータ ポイントは存在しません。このような「ギャップ」を、例えば以下のように、チャート上で特に削除されていることがあります。

インタラクト

LightningChart JS の最新バージョン 3.3.0 では、いくつかの新しいチャートや UI 機能が追加され、パフォーマンスが向上されました。

新しいチャートの追加

この新バージョンでは、いくつかの新しいチャートが追加されました。ダイナミック ダッシュボードの例では、ユーザーがビューにチャートを動的に追加/削除して、さまざまなデータ ソースに対してインタラクティブな分析を行うことができます。また、以下のチャートも含まれています。

地理空間マップチャート
背景の地図画像をベースに、その上にヒートマップをレイアウトしています。このチャートは、インタラクティブなチャート一覧からご覧いただけます。



3D 楕円体チャート
統計学で頻繁に使用される 3D 楕円体チャートは、外れ値の検出に役立ちます。



オフィスの Wi-Fi 電波強度チャート
オフィスの Wi-Fi 電波強度チャートは、ユーザーが外部画像を読み込み、視覚化を作成する方法が確認できます。例として、このチャートではオフィスの Wi-Fi 電波強度を表示しています。



温度異常チャート
これは、温度異常の指数と大気中の二酸化炭素 (100 万分の 1 単位) を視覚化したものです。このチャートは、同じ時間範囲で異なる値を持つ 2 つのトレンドを表示するため、2 つの Y 軸があります。



また、今回のリリースでは、5 つの新しいサーフェス チャートの例を追加しています。

- JS 強度サーフェス グリッド チャート
- JS 2D および 3D チャートのオーディオ スペクトログラム
- JS チャンク サーフェス グリッド チャート
- JS 3D サーフェス グリッド チャート
- JS 部分的な更新が可能なサーフェス チャート

新しいサーフェス チャートはこちらからご確認いただけます。

パフォーマンスの向上

LightningChart JS ヒートマップのパフォーマンスが向上しました。いくつかの注目すべきデータは次の通りです。

- 静的なヒートマップのレンダリング容量が、12 億データ ポイントから 56 億データ ポイントになりました。
- 読み込み速度が 250% 向上しました。
- 空のヒートマップの読み込み速度が 10 倍になりました。
- ヒートマップの更新と追加の全体的なパフォーマンスも大幅に向上しています。

JS ヒートマップのパフォーマンスについての詳細はこちらをご参照ください。

さらに、サーフェス グリッド チャートの新しいパフォーマンス比較の結果を以下にご紹介します。

- 静的サーフェス チャートで 4M のデータ ポイントを読み込むのにかかる時間はわずか 152 ミリ秒です。
- リフレッシュ サーフェス チャートで 4M のデータ ポイントを継続的に更新した場合、10.0Hz のリフレッシュ レートになり、CPU リソースのわずか 15.5% しか消費しません。
- 追加のサーフェス チャートは、LightningChart JS でリアルタイムの 3D スペクトログラムをサポートする世界初の JavaScript チャートとなっています。

JS サーフェス グリッド チャートのパフォーマンスについての詳細はこちらをご参照ください。

LightningChart JS の最新バージョン 3.2.0 では、LightningChart をより簡単にプロジェクトに組み込むことができるようになりました。API やプリミティブ描画モードが追加され、無料のコミュニティ ライセンス ユーザーに対するパフォーマンス ペナルティを取り除きました。

3D LineSeries および PointLineSeries にプリミティブ描画モードを追加

LineSeries3D および PointLineSeries3D でプリミティブ描画モードを使用できるようになりました。
この機能を利用することで、線の奥行き感を軽減してパフォーマンスを向上させることができます。

その他の変更点

デフォルトの日付時刻カーソル フォーマットの向上

デフォルトの日付時刻カーソル フォーマットが、 日付 (年/月/日) と時刻 (時/分) の情報を表示するようになりました。

Axis Tick のパフォーマンスが向上

Axis Tick のパフォーマンスが向上されたことにより、チャートの CPU 使用率が大幅に減少しました。

トレーディング ショーケースの向上

アプリケーション全体がクリーン アップされ、コードの量は約 50％ 減少し、見た目も大幅に向上されました。

ZoomBandChart の向上

ZoomBandChart が、参照するチャートの位置に合わせて自動的に調整されるようになりました。

SeriesXYFormatter に "dataPoint" パラメーターを追加

このパラメーターを使用することで、'value', 'size', 'color', 'rotation' に加えて、ユーザーがカーソルの結果テーブルのフォーマッタに追加したカスタム値を使用できるようになりました。

LightningChart JS の最新バージョン 3.1.0 では、チャート ライブラリに重要なマップ チャートやインタラクティブなチャート一覧のサンプルなどが追加され、ヒートマップ チャートが向上しました。

図: 単独のチャートとして表示されているマップチャート

図: ダッシュボードに統合されたマップ チャート

図: マップ チャートの表の凡例は、データの値に応じて色で表現されます。

また、特定の領域にカーソルを置くとデータを表示する自動カーソル機能や、以下の地域の表示にも対応しています。

• 全世界
• 米国
• 北米
• 南米
• カナダ
• ヨーロッパ
• アジア
• アフリカ
• オーストラリア

マップチャートは、高い FPS レート (フレーム レート) でリアルタイムに更新しているため、卓越したスムーズなリアルタイムのパフォーマンスを提供します。

さらに、Time Tick Strategy により、ナノ秒から数日単位までの時間間隔を視覚的に分かりやすい目盛りで表現することが可能になりました。LightningChart JS では、高精度な XY 軸機能により、ナノ秒単位でのズームが可能です。この機能は、軸やチャートの作成時にオンに切り替えることができます。

LightningChart JS の最新バージョン 3.0.0 では、2D および 3D JavaScript チャートのパフォーマンスの向上だけでなく、ポーラー チャートのサポートや凡例ボックスに新しい UI 要素が追加され、他にもさまざまな新機能が追加されました。

LightningChart JS の最新バージョン 2.2.0 では、全体のパフォ－マンスの向上だけでなく、インタラクティブなチャート一覧のコード サンプルや新機能が追加されました。

LightningChart JS の最新バージョン 2.1.0 では、3D Surface Series や 3D Box Series などの高度な 3D チャートや、いくつかの新しいテーマが追加され、インタラクティブなチャート一覧には新しいコード サンプルが追加されました。さらに、ハイライトされた Zoom Band Charts Series と、指定した Series の Chart との同期が可能になり、NodeJS が改善されました。Vec3 の API ユーティリティが提供され、AxisgetInterval メソッドも利用できるようになりました。

整った 3D チャートの向上に焦点を当てており、3D Surface Series や 3D Box Series などのより高度な 3D チャートが利用可能になりました。

ヒートマップカーソル、カスタム テーマなどいくつかの新しいテーマも導入されました。

インタラクティブなチャート一覧 には、3D 棒グラフ、3D サーフェスおよびスペクトログラム バーなど、多くの新しいコード サンプルが追加されました。

ハイライトされた Zoom Band Charts Series は、割り当てられた Series の Chart と同期され、円/ドーナツ グラフ、およびスパイダー チャートのアニメーションが XY グラフのアニメーションの速度と一致するようになりました。 また、NodeJS のすべての問題が修正されました。

さらに、Vec3 の API ユーティリティが提供されます。これらは 3D チャート、3D Series 、およびカメラで使用するのに役立つユーティリティです。

多くの LightningChart JS ユーザーからリクエストされた AxisgetInterval メソッドと呼ばれる機能も利用できるようになりました。 Axis.getInterval を使用して、現在の軸のスケールの間隔を取得できます。

LightningChart JS の最新バージョン 2.0 では、WebGL によるアクセラレーションで非常に高速な 3D チャートが追加されました。

軸の TickStrategies の改善により、目盛りを Minor、Major、Great に分けることができ、軸の値の表示方法をカスタマイズできるようになりました。また、軸の Highlighters (Band や ConstantLine 等) を取得するための新しいパブリック API を追加しました。

ユーザーによるさらに容易なコントロールを実現するため、マウスイベントとタッチイベントのイベントハンドラーを追加しました。

また、半透明の線の可視性が改善された太い線のレンダリング技術が向上し、PointSeries のレンダリングが高速になるなど、パフォーマンスが大幅に向上しています。これら 2 つの改善により、GL メモリの使用量を削減できます。

すべての XY 系列、UI 要素、Chart、Dashboard コンポーネントにおいて、FillStyles でグラデーション (Gradients) が利用できるようになりました。

視覚的な変化としては、デフォルトのスタイルが変更されてダッシュボード向けにより現代的かつ簡素化されたチャート オプションが提供され、デフォルトのズーム アニメーションの長さが短縮されています。また、透明な背景が利用できるようになりました。