データ可視化を高速化:Canvasベースのチャートへ移行

データ可視化は DoiT Console Analytics の中核を担う機能であり、複雑なデータをユーザーが読み解くうえでチャートは欠かせません。しかし、お客様が一度に表示したいデータ量が増えるにつれ、これまで使ってきた Highcharts では処理が追いつかず、UIのフリーズが頻発してユーザー体験を損なうようになっていました。

そこで私たちは、ユーザーが期待するパフォーマンスと機能を維持しながら大規模なデータセットを効率的に扱える代替ライブラリを探すことにしました。

本記事では、SVGベースのチャートライブラリから canvas ベースのライブラリへ移行した経緯と、それぞれのアプローチの課題やメリットをご紹介します。

Scalable Vector Graphics(SVG)は、長らくチャートやデータ可視化の定番として親しまれてきました。しかし、扱うデータが大きくなると、SVGベースのライブラリは深刻なパフォーマンスのボトルネックになりがちです。原因は、SVGライブラリがチャート要素を管理する仕組みそのものにあります。

SVGでは要素ごとにDOMノードが作られるため、チャート内の要素が増えるほどDOMが肥大化します。その結果、JavaScript が巨大なDOMツリーをさばききれず、UIのフリーズなどユーザー体験上の問題が発生します。

例:下図のようなシンプルなレポートでも、10,000を超えるDOMノードが生成されます。

シンプルなAnalyticsチャート

ブラウザでチャートのバーを1本選んで調べると、各バーが1つの SVGタグで表現されていることがわかります。

DOM内のチャート構造

Canvasは、Webページ上に描画領域を提供し、JavaScript からグラフィックを生成・操作できるWeb技術です。ビットマップベースで canvas 要素に直接描画するため、生成されるDOMノードは1つだけで済みます。

このため、動的でインタラクティブなグラフィックや複雑な可視化に非常に向いています。さらにGPUを活用できるため、より滑らかで応答性の高いチャートを実現し、快適な操作感を提供できます。

SVGとCanvasの描画時間の比較

canvas ベースのライブラリは数多くあり、最適な1つを選ぶのは簡単ではありません。そこで私たちは、大規模データセットを使って複数のライブラリを実際に動かし、パフォーマンス、機能、ドキュメント、利用実績、柔軟性の観点から評価しました。徹底的な比較検討の末、卓越したパフォーマンス、豊富なカスタマイズ性、活発なコミュニティを備えた Apache ECharts を、本プロジェクトに最適なライブラリとして採用しました。

Apache ECharts は段階的に導入しました。まず新しいチャートを既存ライブラリと並行して動かせるようにし、少しずつ移行できる体制を整えました。これにより、エラーのリスクを最小限に抑えつつ、新しいチャートが要件を満たしているかを確認できました。導入後は、本番データを用いて新旧ライブラリのパフォーマンスを比較し、改善効果を定量的に検証しました。

例:本番データで非常に大規模なレポートを生成した際のパフォーマンス改善。

旧チャートと新チャートの比較

SVGベースのチャートライブラリから canvas ベースのライブラリへの移行は、決して平坦な道のりではありませんでしたが、その成果は大きなものでした。従来のライブラリでは、お客様が求める大規模データセットの可視化に対応しきれず、パフォーマンスの問題が顕在化していました。徹底的な調査と検証の結果、最適解として Apache ECharts を採用。段階的に導入を進めたことで、スムーズな移行と大幅なパフォーマンス向上を両立できました。新ライブラリは大量のデータを扱う場面でも、視覚的に洗練されたインタラクティブな体験を提供し、お客様の期待を超える成果につながっています。