SVGまたはCanvasでのレンダリング

ほとんどのブラウザ側のチャートライブラリは、基盤となるレンダラーとしてSVGまたはCanvasを使用しています。一般的に、両方の技術は交換可能であり、同様の効果があります。ただし、特定のシナリオやケースでは、違いが顕著になる場合があります。そのため、チャートのレンダリングにどの技術を使用するかを決めるのは常に難しい選択です。

Canvasは、EChartsのレンダラーとして当初から使用されてきました。v4.0以降、EChartsは追加オプションとしてSVGレンダラーを提供しています。チャートを初期化する際に、rendererパラメータを'canvas'または'svg'として指定できます。

SVGとCanvasでは使用方法に大きな違いがあります。EChartsで両方のテクノロジーが統一的にサポートされているのは、基盤となるライブラリZRenderの抽象化と実装によるものです。

レンダラーの選び方

一般的に、Canvasは多数の要素（ヒートマップ、地理座標または平行座標の大規模な線または散布図など）を使用するチャートや、視覚的なエフェクトを使用するチャートに適しています。ただし、SVGには重要な利点があります。メモリ使用量が少なく（モバイルデバイスでは重要）、拡大してもぼやけないことです。

レンダラーの選択は、ハードウェアとソフトウェアの環境、データ量、機能要件の組み合わせに基づいて行うことができます。

  • ハードウェアとソフトウェアの環境が良好で、データ量がそれほど大きくないシナリオでは、どちらのレンダラーも機能し、それについて悩む必要はあまりありません。
  • 環境が悪く、最適化が必要なパフォーマンスの問題が発生するシナリオでは、実験を使用してどのレンダラーを使用するかを決定できます。たとえば、このような経験があります。
    • 多数のEChartsインスタンスを作成する必要があり、ブラウザがクラッシュしやすい状況（おそらく、Canvasの数がメモリフットプリントが電話の容量を超えていることが原因）では、SVGレンダラーを使用して改善することができます。大まかに言えば、チャートがローエンドのAndroidで実行されている場合や、LiquidFillチャートなどの特定のチャートを使用している場合は、SVGレンダラーの方がうまく機能する可能性があります。
    • 大量のデータ（> 1kは経験値）の場合、常にcanvasレンダラーが推奨されます。

より良い最適化を行うために、開発者の皆様からの経験やシナリオに関するフィードバックを歓迎します。

注：現在、いくつかの特殊効果は依然としてCanvasに依存しています。例：トレイル効果、ブレンディング効果のあるヒートマップなど。

v5.3.0以降、SVGレンダラーは仮想DOMを使用してリファクタリングされ、パフォーマンスが2〜10倍向上し、特定のシナリオでは数十倍にもなります！詳細については、#836を参照してください。

レンダラーの使用方法

次の方法でechartsを完全にインポートすると、SVGレンダラーとCanvasレンダラーが自動的にインポートおよび登録されます。

import * as echarts from 'echarts';

ツリーシェイカブルインポートを使用している場合は、必要なレンダラーを手動でインポートする必要があります。

import * as echarts from 'echarts/core';
// You can use only the renderers you need
import { SVGRenderer, CanvasRenderer } from 'echarts/renderers';

echarts.use([SVGRenderer, CanvasRenderer]);

次に、チャートを初期化する際にrendererパラメータを設定できます。

// Use the Canvas renderer (default)
var chart = echarts.init(containerDom, null, { renderer: 'canvas' });
// Equivalent to
var chart = echarts.init(containerDom);

// use the SVG renderer
var chart = echarts.init(containerDom, null, { renderer: 'svg' });

貢献者 GitHubでこのページを編集

plainheart plainheartpissang pissangmrbrianevans mrbrianevans