Question

enter image description here

我想在图像中使用类似的图表是否可以使用谷歌图表或任何其他jquery图表库

Answer 1

看看highchart plugin。这是一个非常好的插件，用于创建任何类型的图表。

另见jqplot

但是高图表非常好。

更新

jchartfx

Answer 2

您是否看过google charts api文档？

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

它看起来很不错，也是互动的。

Answer 3

如果您只想要图表，google visualization的此代码将执行此操作：

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。我不相信many reasons}

的三维图形

结果：

Interactive Chart

如果你绝对需要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 is evil

如果图表是交互式的，我假设不需要下表，但如果绝对需要，您可以使用this执行此操作。

图表或图表

3 个答案: