11

「標準」のグラフ作成用のライブラリを選択する必要があります: 円グラフ、折れ線グラフ、棒グラフです。

私が読んだことから、たとえば Highcharts のような SVG/VML が最適な形式であるように思えます。SVG は、IE 9 で受け入れられるようになったため、すべての主要なブラウザーで標準になりつつあります。キャンバスよりもリスケールしてエクスポートする方が簡単なようです。

それでも、いくつかのグラフ作成ライブラリが Canvas に依存していることがわかります。何か不足していますか？そのようなアプリケーションで Canvas over SVG を検討する理由はありますか?

4

3 に答える 3

8

通常、どちらを使用しても同じ結果が得られます。どちらも、ユーザーの画面にピクセルを描画することになります。主な差別化要因は、HTML5 Canvas が結果をピクセルレベルで制御できること (読み取りと書き込みの両方) であるのに対して、SVG は保持モードのグラフィックス APIであり、イベントの処理や JavaScript や SMIL アニメーションを使用したアートワークの操作を非常に簡単にします。すべての再描画を処理します。

一般に、次の場合は HTML5 Canvas を使用することをお勧めします。

  • 効果をピクセル レベルで制御する必要がある (ぼかしやブレンドなど)
  • 一度表示される (そしておそらくパンされる) 非常に多数のデータ ポイントがあるが、それ以外は静的である

次の場合は SVG を使用します。

  • 画面に描画された複雑なオブジェクトをイベントに関連付けたい (たとえば、データ ポイントに移動してツールヒントを表示する)
  • 結果を高解像度でうまく印刷したい
  • さまざまなグラフ パーツの形状を個別にアニメーション化する必要がある
  • 検索エンジンによってインデックス付けされるテキストが出力に含まれます
  • XML や XSLT を使用して出力を生成したい
于 2011-05-09T21:28:12.493 に答える
5

大量の操作やアニメーションが必要な場合や、10,000 以上のチャートが必要な場合を除き、Canvas は必要ありません。パフォーマンス分析の詳細については、こちらをご覧ください。

区別することも重要です。チャート作成とダイアグラム作成は 2 つの異なるものです。いくつかの棒グラフを表示することは、(たとえば) 10,000 以上の移動可能で、リンク可能で、アニメーション化される可能性のあるオブジェクトを使用してフローチャートを作成することとは大きく異なります。

すべての SVG 要素は DOM 要素であり、DOM に 10,000 または 100,000 のノードを追加すると、信じられないほどの速度低下が発生します。しかし、それだけ多くの要素を Canvas に追加することは完全に実行可能であり、非常に高速です。

混乱しているかもしれません: RaphaelJS (私の意見では、最高のチャート SVG ライブラリ) は canvas という言葉を使用していますが、それは HTML<canvas>要素とはまったく関係ありません。

于 2011-05-09T12:46:52.573 に答える
0

過去 2 年間、私の好みは svg を使用することでした。これは、円グラフ、縦棒グラフ、またはマップを作成するために比較的小さなデータセットを主に扱っているためです。

ただし、キャンバスで見つけた利点の 1 つは、 toDataURLメソッドのおかげでグラフを画像として保存できることです。私はsvgに相当するものを見つけていません.svgチャートクライアント側を保存する最良の方法は、最初にキャンバスに変換することです(たとえばcanvgを使用)。

于 2013-09-28T16:09:00.450 に答える