如何使用Google Chart做图

Posted on | In |

缘由

学校的Capstone项目需要我们帮一家银行制作他们信用卡界面，鉴于自己没有太多前端开发经验，做了一些简单调查，打算用Google Chart来完成要求。后端只需要给前端发一个JSON格式的文件即可。

步骤

第一步 Example

可以参考Google Chart文档 https://developers.google.com/chart/interactive/docs/quick_start
例子是一个饼图
-c269
我们只需要把代码复制并保存进一个html文件即可

第二步 自定义图

我们可以在Guide目录下选择自己想要的图，以下是可以选择的类型
-w145
然后选择edit fiddle并修改其中的参数即可
-c872

具体代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<html>
  <head>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
    google.charts.load('current', {packages: ['corechart', 'bar']});
    google.charts.setOnLoadCallback(drawMultSeries);
    function drawMultSeries() {
      var data = google.visualization.arrayToDataTable([
        ['Category', 'Industry', 'Client'],
        ['CLOTHING/SHOES', 27135.14, 3977.11],
        ['BUSINESS/PROFESSIONAL', 24043.57, 1425.87],
        ['FURNISHINGS/APPLIANCES', 18682.86, 11808.33],
        ['ASSOCIATIONS/ORGANIZATIONS', 13713.88, 1392.22],
        ['LODGING/HOTELS', 12201.54, 2997.49]
      ]);
      var options = {
        title: 'Company9 Quarterly Spending(2016 Q3) vs Industry Benchmark',
        chartArea: {width: '50%'},
        hAxis: {
          title: 'Total Spending',
          minValue: 0
        },
        vAxis: {
          title: 'MCC Categories'
        }
      };
      var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    }
    </script>
  </head>
  <body>
    <div id="chart_div"></div>
  </body>
</html>

第三步 用JSON生成图表
未完待续。。。

参考文献

如何用JSON连接Google Chart
官方文档