javascript - 多次元配列を棒グラフで表示する（JavaScriptで）？

Question

多次元配列を棒グラフの形で表示する方法について、誰かが私にいくつかの指針を与えることは可能ですか？

配列は多次元であり、各部分に3つの要素があり、要素はHTMLフォームによって決定されます。

したがって、この種の配列を標準のHTMLサイトのJavascriptで棒グラフの形式で表示できる場合は、助けていただければ幸いです。

ありがとう

Answer 1

FlotとMilkChartをチェックしてください。前者はjQueryを拡張し、後者はMooToolsを拡張します。どちらもcanvas要素を使用しており、これは現在すべての主要なブラウザーでサポートされています（追加のスクリプトが含まれているIEでも）。評判を見てくださいスタックオーバーフロープロファイルのタブをクリックして、使用中を確認します。私は以前にプロジェクトでFlot（MilkChartを試したことがない）を使用しました。データをプロジェクトに渡す方法は最初は少し直感的ではないように思われるかもしれませんが、非フラッシュチャートソリューションとしては実際にはかなり強力であることがわかります。 。Flotは、チャートの相互作用を定義するために使用できるカスタムイベントも定義します。Flotはプラグインで積み上げ棒グラフをサポートしており、クラスター化された棒グラフもプラグインで実行できると思います。

グラフの棒として要素を使用するある種の宣言型グラフィックスソリューションをいつでも使用できますがdiv、それは、キャンバスを使用してグラフを描画するほど簡単ではなく、ブラウザ間で一貫性がありません。

これらのソリューションのいずれかに不安がある場合は、データをサービスに送信して静止画像を返すことができます。Google Charting APIは、グループ化された棒グラフをサポートしています。または、自分でホストしているサービスを使用することもできます。

私の推奨事項は、HTMLキャンバスを使用する最初のソリューションであり、特にFlotを利用することです。これは、私が最も経験があり、保証できるライブラリであるためです。たぶん誰か他の人がMilkChartについてコメントしています。

編集：

私が言及するのを忘れたもう1つのライブラリは、MochiKitを拡張するPlotKitです。私は使用していませんが、要素を使用したチャート作成だけでなく、 SVGを使用したチャート作成もサポートしているようです。スケーラブルベクターグラフィックスは、HTMLを使用してソリューションをハッキングする以外に、別の宣言型グラフィックスオプションを提供しますが、SVGベースのソリューションが（特にIEで）どのようにクロスブラウザーになるかはわかりません。canvas

編集：

これは、 div要素を使用してグラフ化するjQueryプラグインです。私は個人的にこのオプションが好きではありません。他のいくつかのオプションよりも複雑で設定が簡単ではないと思うからです。HTML要素を使用して複雑な宣言型グラフィックを作成することは（印象的ではありますが）一種のハッキングされたソリューションであり、私の経験では、ある時点で問題を引き起こすと思います。

Answer 2

ドキュメントによると、excanvas 拡張機能がインストールされている場合、Flot と MilkChart の両方が IE でのみ機能します。

移植性を高めるために、 Google Visualization APIをチェックすることをお勧めします。これは非常に使いやすく、さまざまな表示の可能性があります。ビジュアライゼーションは、フラッシュ要素 (インタラクティブ) またはプレーン イメージ (静的) としてレンダリングされます。