javascript - html5 でグラフとレポートを動的に取得する方法は?

Question

私は phonegap を使用して Android タブレット アプリケーションに取り組んでいます。このアプリケーションでは、下の図に示すように、さまざまなもののステータスを図式的に説明するレポート チャートを取得する必要があります。

データの変化に応じて変化するこれらの種類のチャートまたはレポートを動的に生成したいと考えています。同様の機能を持つ html5、js、および css を使用していくつかの例を提供してくれる人はいますか?

Answer 1

RGraph: HTML5 & Javascript チャートをチェックしましたか?

RGraphは、HTML5 を使用して描画し、20 種類以上のグラフをサポートする Javascript で記述されたグラフ ライブラリです。RGraph は、新しい HTML5 キャンバス タグを使用して、Javascript を使用して Web ブラウザー内でこれらのグラフを作成します。これは、ページの高速化と Web サーバーの負荷の軽減を意味します。これにより、ページ サイズが小さくなり、コストが削減され、Web サイトが高速になります。

---

基本的なコードを見ると、次のようになります。

<script>
    window.onload = function ()
    {
        // The data to be shown on the Pie chart
        var data = [564,155,499,611,322];

        // Create the Pie chart. The arguments are the canvas ID and the data to be shown.
        var pie = new RGraph.Pie('myPie', data);

        // Configure the chart to look as you want.
        pie.Set('chart.labels', ['Abc', 'Def', 'Ghi', 'Jkl', 'Mno']);
        pie.Set('chart.linewidth', 5);
        pie.Set('chart.stroke', 'white');

        // Call the .Draw() chart to draw the Pie chart.
        pie.Draw();
    }
</script>

円グラフの実際の例をご覧ください!

---

あなたのものはレーダーチャートです。ここで 1 つを参照してください:レーダー チャート。ソースコード：

<script>
    window.onload = function ()
    {
        // The data to be represented on the Radar chart.
        var data = [3, 3, 41, 37, 16];

        // Create the Radar chart. The arguments are the canvas ID and the data to be shown on the chart.
        var radar = new RGraph.Radar('myRadar', data);

        // If you want to show multiple data sets, then you give them like this:
        // var radar = new RGraph.Radar('myRadar', [3,5,6,8], [4,5,2,6]);

        // Configure the Radar chart to look as you wish.
        radar.Set('chart.background.circles', true);
        radar.Set('chart.color', 'rgba(255,0,0,0.5)');
        radar.Set('chart.circle', 20);
        radar.Set('chart.circle.fill', 'rgba(200,255,200,0.5)');
        radar.Set('chart.labels', ['Safari (3%)', 'Other (3%)', 'MSIE 7 (41%)', 'MSIE 6 (37%)', 'Firefox (16%)']);
        radar.Set('chart.key', ['Market share', 'A made up figure']);

        // Now call the .Draw() method to draw the chart.
        radar.Draw();
    }
</script>

Answer 2

以下のリンクを確認してください。実際にいくつかの良い例があります。

http://www.highcharts.com/

それでも問題が解決しない場合はお知らせください

Answer 3

考えられる解決策は、 CSS3 トランジションをグラフ にマップすることです。これは、JavaScript を使用せずにできることを示す基本的な例です。

css (javascript なし) で生成された静的な例を次に示します。インタラクティブな例を見つけるのに苦労していますが、前のリンクの 1 つで示されているように、それは可能です。