Google Chart 之 Area Chart案例

数据可视化是近来比较火热的一个话题,那么在绝大部分情况下,常见的比如折线图,柱状图等都可以通过直接调用第三方的API来实现,比如Google Chart,Google Chart 提供了完整的文档供开发者使用,同时提供的还有在线编辑器:JSFiddle,下面分享一个对Area Chart(面积图)的实例:

 

 源代码如下:

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses'],
          ['2013',  1000,      400],
          ['2014',  1170,      460],
          ['2015',  660,       1120],
          ['2016',  1030,      540]
        ]);

        var options = {
          title: 'Company Performance',
          hAxis: {title: 'Year',  titleTextStyle: {color: '#333'}},
          vAxis: {minValue: 0}
        };

        var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
    <title>一个简单的demo</title>
  </head>
  <body>
    <div id="chart_div" style="width: 100%; height: 500px;"></div>
  </body>
</html>

可以看到,首先需要一个div元素作为渲染的核心,然后引入Google的JS库,最后使用draw方法渲染图表,其中主要注意对数据和样式的渲染

作为调用第三方库的我,最关心的无疑是如何修改页面元素显示效果,比如渲染的颜色,背景色填充,X,Y坐标轴如何修改样式等,所以研究了下官方文档后,我大致总结了一些常见的渲染效果,演示结果如下:

 

 源代码如下:

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Month'); 
        data.addColumn('number', 'Sales'); 
        data.addColumn({type:'number', role:'interval'});  
        data.addColumn({type:'number', role:'interval'});  
        data.addColumn({type:'string', role:'annotation'});
        data.addColumn({type:'string', role:'annotationText'});
        data.addColumn({type:'boolean',role:'certainty'}); 

        //  true / false 表示实线,虚线
        data.addRows([
            ['2015',1000,  null, null,  '$1000','', true],
            ['2016',  1170, null, null,  '$1170','', true],
            ['2017',  666,  null,  null,  '$666','', true],
            ['2018', 1030, null, null, '$1030', '', true],
            ['2019', 7777, null, null, '$7777', '', true],
            ['2020', 10000, null, null, '$10000', '', false]
        ]);
        var options = {
          title: '年度销售额(2015-2020)',
          // Y 轴
          hAxis: {
              title: 'Y轴标题', 
              titleTextStyle: {color: '#00ff00'},// Y轴标题颜色
              gridlines:{
                  color: 'transparent', 
                  minSpacing: 20,
              },
          },
          // X 轴
          vAxis: {
              title: 'X轴标题', 
              titleTextStyle: {color: '#00ff00'},// X轴标题颜色
              textStyle: {
                color: '#ff0000'
              },
          },
          height: 300, // 图表的高度
          width: 700, // 图标的宽度
          legend: { position: 'top'}, // 图例展示的位置
          colors: ['#62325a'] // 渲染面积里的颜色
        };

        var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
    <title>test Area chart</title>
  </head>
  <body>
      <div id="chart_div" style="width: 100%; height: 500px;"></div>
  </body>
</html>

最后在玩了下这个图后,发现这个图背景里出现的网格线比较的扎眼,于是想要隐藏一些现有的内容,比如网格线,比如X轴上的信息等等,那么演示效果如下:

 

 源代码如下:

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Month'); 
        data.addColumn('number', 'Sales'); 
        data.addColumn({type:'number', role:'interval'});  
        data.addColumn({type:'number', role:'interval'});  
        data.addColumn({type:'string', role:'annotation'});
        data.addColumn({type:'string', role:'annotationText'});
        data.addColumn({type:'boolean',role:'certainty'}); 

        //  true / false 表示实线,虚线
        data.addRows([
            ['2015',1000,  null, null,  '$1000','', true],
            ['2016',  1170, null, null,  '$1170','', true],
            ['2017',  666,  null,  null,  '$666','', true],
            ['2018', 1030, null, null, '$1030', '', true],
            ['2019', 7777, null, null, '$7777', '', true],
            ['2020', 10000, null, null, '$10000', '', false]
        ]);
        var options = {
          title: '年度销售额(2015-2020)',
          // Y 轴
          hAxis: {
              // title: 'Y轴标题', 
              title: '', // 隐藏 Y 轴标题
              titleTextStyle: {color: '#00ff00'},// Y轴标题颜色
              gridlines:{
                  color: 'transparent', 
                  minSpacing: 20,
              },
          },
          // X 轴
          vAxis: {
              // title: 'X轴标题', 
              title: '', // 隐藏 X 轴标题
              titleTextStyle: {color: '#00ff00'},// X轴标题颜色
              textStyle: {
                color: '#ff0000'
              },
              gridlines:{
                color: 'transparent',  // 隐藏网格线
                // color:'#0000ff', - 网格线 颜色
                // minSpacing: 20, - 网格线之间的间距
              },
              textPosition: 'none' // 隐藏X轴
          },
          height: 300, // 图表的高度
          width: 700, // 图标的宽度
          // legend: { position: 'top'}, // 图例展示的位置
          legend: { position: 'none'}, // 隐藏图例
          colors: ['#62325a'] // 渲染面积里的颜色
        };

        var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
    <title>test Area chart</title>
  </head>
  <body>
      <div id="chart_div" style="width: 100%; height: 500px;"></div>
  </body>
</html>

 补充:因为Salesforce安全性审查的原因,Google Chart是没办法应用到Salesforce Lightning组件中的,不得不说,这是很大的遗憾,不过可以在组件中调用Chart.JS,具体的可以查看我的博客“Salesforce Lightning组件中使用Chart.JS实现数据可视化

以上,数据可视化在未来可能是个很有意思的方向,相对传统的Excel表格,以图表的形式更能表现数据的发展趋势,简单调用API,如有错漏之处还请指正

 

posted @ 2020-04-07 00:32  Ricardo.M.Lu  阅读(641)  评论(0编辑  收藏  举报