0

ここに画像の説明を入力

画像に似たチャートが欲しいです。
Googleチャートまたは他のjqueryチャートライブラリで可能ですか

4

3 に答える 3

1

グラフだけが必要な場合は、Google ビジュアライゼーションの次のコードで実行できます。

function drawVisualization() {
  // Create and populate the data table.
  var data = google.visualization.arrayToDataTable([
    ['Country', 'Oranges', 'Apples'],
    ['India',  4,   10],
    ['USA',  2,   3],
    ['Africa',  1,   1],
    ['Russia',  24,  12],
    ['UK',  3,   2],
    ['Spain',  1,   2],
    ['Germany',  3,   3]
  ]);

  // Create and draw the visualization.
  new google.visualization.ColumnChart(document.getElementById('visualization')).
      draw(data,
           {width:600, height:400, isStacked: true}
      );
}

免責事項: これは 3D ではありません。私は多くの理由で 3D グラフを信じていません

結果：

インタラクティブチャート

どうしても 3D が必要な場合は、古いバージョンの棒グラフを使用できます。

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>
      Google Visualization API Sample
    </title>
    <script type="text/javascript" src="//www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load('visualization', '1', {packages: ['barchart']});
    </script>
    <script type="text/javascript">
      function drawVisualization() {
        // Create and populate the data table.
        var data = google.visualization.arrayToDataTable([
          ['Country', 'Oranges', 'Apples'],
          ['India',  4,   10],
          ['USA',  2,   3],
          ['Africa',  1,   1],
          ['Russia',  24,  12],
          ['UK',  3,   2],
          ['Spain',  1,   2],
          ['Germany',  3,   3]
        ]);

        // Create and draw the visualization.
        new google.visualization.ColumnChart(document.getElementById('visualization')).
            draw(data,
                 {width:600, height:400, isStacked: true, is3D: true}
            );
      }


      google.setOnLoadCallback(drawVisualization);
    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    <div id="visualization" style="width: 600px; height: 400px;"></div>
  </body>
</html>

結果：

3Dは悪

チャートがインタラクティブな場合、下のテーブルは必要ないと思いますが、絶対に必要な場合はこれで行うことができます。

于 2013-09-17T05:36:44.453 に答える
1

ハイチャート プラグインをご覧ください。あらゆる種類のチャートを作成するための非常に優れたプラグインです。

jqplotも参照してください

しかし、ハイチャートはかなり良いです。

アップデート

jchartfx

于 2013-09-13T07:22:41.353 に答える