3

私は jfreechart を使用してガント チャートを作成し、それにマイルストーンを追加することさえできました。これらのグラフを Web ページに動的に表示することもできます。

しかし、チャートにインタラクションを追加したいので、何らかのクライアント側のものが必要です。jsgantt について確認しましたが、一般的には正常に動作し、自分の要件に合わせて拡張しようとしました。コードのいたるところに HTML CSS スタイルがあり、従うのが難しいため、私はそれをあきらめました - 著者は、これはより良いクロスブラウザ サポートのためであると主張していますが、クロスブラウザの動作は依然として問題です: ツリーのテキストはFirefox のチャート自体と適切に整列します。

私は今、それをゼロからやろうと考えていますが、どこから始めればよいかわかりません。ここにはいくつかの選択肢があるようです:

  1. Javascript、HTML、および CSS - 実際には jsgantt の方法である表と背景の色を使用してチャートをフォーマットします。
  2. HTML5 Canvas と Javascript - 古いブラウザーではサポートされておらず、DOM フレンドリーではありません。
  3. Java アプレット - わかりません。
  4. SVG と Javascript - 以前は機能しませんでした。

選択に関して、あなたの経験から誰かアドバイスをいただけませんか。ありがとう!

4

1 に答える 1

3

まず、どのブラウザーやプラットフォームをサポートする必要があるかを自問してください。その質問に対する答えによって、どのルートに進むかが決まるからです。

おっしゃる通り、Canvas は古いブラウザではサポートされていないため、サポートする必要がある場合は問題になります。古いバージョンの IE にキャンバス サポートを追加するためのポリフィル ハックがありますが、非常に遅いです。

SVG は、古いバージョンの IE でもサポートされていません。ただし、この場合、IE は IE5.5 以降、VML と呼ばれる代替ベクトル形式をサポートしているため、適切なフォールバック ソリューションがあります。優れたRaphaelなどのいくつかの JS ライブラリは、実行しているブラウザーに応じて SVG と VML の両方をサポートしているため、クロスプラットフォームのベクター グラフィックスを非常に簡単に作成できます。

上記を考えると、SVG (VML フォールバックを使用) が非常に有効であることは明らかです。SVG の唯一の欠点は、Android v2.x がサポートしていないことです。v3 と v4 はサポートしていますが、現在出回っている Android デバイスの大半はまだ v2.x を実行しています。

したがって、当面は、モバイル サポートを含める必要がある場合は、SVG を使用しないでください。ただし、この状況は急速に変化するため、1 年後には別のアドバイスを提供できると思います。Android ユーザーのことを心配していなければ、今すぐ SVG を使用することをお勧めします。

Java アプレットは悪い考えです。これは多くのモバイル環境で確実に機能しなくなり、他の環境では非常に遅くなります。アプレットは、過剰な処理リソースを消費し、多くの場合、アプレットとアプレットが表示されているページの他の部分との間でぎこちないユーザー インターフェイスの切断が発生するため、あまり人気がありません。

Flash と ActiveX についても同様のことが言えます。このルートをたどる場合は、おそらく Java アプレットよりも Flash が最も安全なオプションですが、もちろん Flash は iOS デバイスでは動作しません。

以上のことから、完全にクロスブラウザーおよびクロスプラットフォームである完全にクリーンなソリューションが必要な場合は、純粋な JS、HTML、および CSS を使用する必要があることが明らかになります。特にガント チャートのように、すべてが水平線と垂直線とボックスで構成されているチャートでは、これは見た目ほど負担ではありません。HTML テーブルを使用する必要さえありません。実際、テーブルを使用しないことを強くお勧めします。<div>配置とレイアウトに注意して、すべてに要素を使用するだけで問題ありません。

何を使うにしても、インタラクティブにしたい場合は、jQuery を使用してクリックとドラッグ、移動とサイズ変更を処理することを強くお勧めします。これは純粋な JS で実行でき、うまく機能しますが、多くの作業が必要であり、jQuery を使用するとはるかに簡単になります。

それが役立つことを願っています。

于 2012-04-12T19:32:20.407 に答える