1

私はクライアント側の Web 開発にまったく慣れていないので、質問を自由に編集してください。

HTML5/JavaScript および jQuery ベースのグラフ作成ライブラリについては、RGraph (HTML5 / JavaScript グラフとして名前が付けられています) とHighCharts (jQuery フレームワークで JavaScript グラフとして名前が付けられています) を例に挙げてみましょう。

RGraphは、ドキュメントに例示されているように、生成されたチャートを表示するためにタグを使用します。<canvas>ただし、HighChartsは<div>タグをチャートのプレースホルダーとして使用します。

RGraphと同じようにHighChartsを<canvas>タグに入れようとしています (これは奇妙に聞こえるかもしれません...わかりません)、チャートを表示できません。逆に、 RGraphチャートをHighChartsとしてプレースホルダーに配置すると、同じ問題が発生します。<div>

私が見ているのは、 と が単なるプレースホルダーであり、派手なインタラクティブなアクションはすべて JavaScript によってダウンしていることだけです。では、なぜ上記の問題を思いついたのでしょうか。RGraph と HighCharts の間にいくつかの設定の違いがある理由があると思いますが、それらが何であるかはわかりません...

<canvas>と<div>タグでのグラフのレンダリングの違いは何ですか?

~~~~~~~~~~~~~~~~~

以下は、デモ用のスクリプトです。

RGraphを に入れると<canvas>、完全に正常に動作します。

<!DOCTYPE html>
<html>
    <head>

        <script>
                Scripts go here 
        </script>

    </head>
    <body>

        <div>
            <h1>Basic RGraph Example</h1>
            <h2>Line Chart</h2>
            <canvas id="line" width="400" height="300"></canvas>
            <h2>Pie Chart</h2>
            <canvas id="pie" width="400" height="300"></canvas>
            <h2>Bar Chart</h2>
            <canvas id="bar" width="400" height="300"></canvas>

        </div>

    </body>
</html>

<div>グラフをタグに入れると機能しません:

<!DOCTYPE html>
<html>
    <head>

        <script>
                Scripts go here 
        </script>

    </head>
    <body>

        <div>
            <h1>Basic RGraph Examples</h1>
            <h2>Pie Chart</h2>
            <div id="line" width="400" height="300"></div>
            <h2>Line Chart</h2>
            <div id="pie" width="400" height="300"></div>
            <h2>Bar Chart</h2>
            <div id="bar" width="400" height="300"></div>

        </div>

    </body>
</html>

コメントをお待ちしております。ありがとう！

4

2 に答える 2

3

<div>タグと<canvas>タグは実際には JavaScript チャートの境界線ではありません。それは本当にキャンバス対SVGです。RCharts は canvas を使用してグラフを描画します。Highcharts は SVG を使用します。Highcharts は、チャートのコンテナーとして div を使用するだけです。これにより、ユーザーは DOM でグラフを描画する場所を指定できます。同様に、flot と jqplot (どちらもキャンバスを使用してプロットをレンダリングします) は、同じ方法で div タグを使用します。

それでは、あなたの質問は、描画用のキャンバスと SVG のどちらになりますか? それについてはこちらとこちらをお読みください。

于 2012-06-27T16:48:29.180 に答える
1

まず<canvas>、HTML 標準への比較的新しい追加であり、すべてのブラウザーまたはバージョンで普遍的にサポートされているわけではありません。ただし、このタイプの情報を効率的かつ確実に表示するには、これが最適なオプションである可能性があります。

他のタグを使用したときにコンテンツが表示されない理由については、次のとおりです。

<canvas>タグを使用すると、フォールバック コンテンツを指定できます。たとえば、次のスニペットです。

<canvas>Your browser does not support the canvas tag!</canvas>

タグをサポートしていないYour browser does not support the canvas tag!ブラウザでは のように表示されますが、サポートしているブラウザでは 300x150 のキャンバスが挿入され、透明なボックスとして表示されます。<canvas>

逆の場合、従来のタグのようなものを使用しようとして<div>、特定canvasの操作のようなものを使用しようとしてgetContext()も、何も実行されないか、処理されない場合はエラーが発生することさえあります。

どちらのライブラリも、これらの使用シナリオを処理する可能性は低く、サイレントに失敗するか、大量のデバッグ情報をコンソールに送信します。

2 つの方法の主な違いは、<canvas>レンダリングがピクセル/ライン/テキストを「レンダリング コンテキスト」に直接描画し<div>、多くの理由でこのタイプのデータのレンダリングよりも優れた代替手段であることです。ただし、クロスブラウザーのサポートが不足しているため、通常、この手法は避けられます。

<div>一方、レンダリングは、データの視覚的表現をエミュレートするために必要なすべての形状と要素の DOM 要素を作成します。これは、データの解像度とチャートのサイズに応じて、パフォーマンスへの影響が無視できるか、または重大である可能性があります。ブラウザの互換性のコスト。

妥協点の 1 つは、excanvas のようなポリフィルを使用して、ほとんどのブラウザー (最近の IE バージョンであっても) でキャンバス サポートを提供することです。

ただし、ライブラリのドキュメントを参照してください。レンダリングにライブラリを使用している場合、それらはすでにポリフィルを実装しているか、<canvas>サポートされていないブラウザ用の要素内にフォールバック コンテンツを実装している可能性があります。

于 2012-06-27T16:47:48.193 に答える