0

在此处输入图像描述

我想要一个类似图像的图表。
是否可以使用谷歌图表或任何其他 jquery 图表库

4

3 回答 3

1

看看highchart 插件。它是用于创建任何类型图表的非常好的插件。

另见jqplot

但是高图还是不错的。

更新

jchartfx

于 2013-09-13T07:22:41.353 回答
1

你看过谷歌图表 api 文档吗？

https://developers.google.com/chart/interactive/docs/gallery/columnchart

它看起来不错，而且还具有交互性。

于 2013-09-15T14:11:13.000 回答
1

如果你只想要图表，谷歌可视化的这段代码就可以了：

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 回答