如何在网页上添加谷歌图表？-yiteyi-C++库

什么是饼图？ 饼图（或圆图）是一种圆形统计图形，它被分成若干个部分来说明数字比例。在饼图中，每个切片的弧长（以及相应的中心角和面积）与其所代表的数量成正比。虽然它因与切片的馅饼相似而得名，但它的呈现方式也有所不同。

null

饼图的应用

饼图通常用于显示企业中不同商品的销售百分比或比例数据。
在选举中用于显示每个政党获得的选票百分比。
在调查中用于描述每个类别中的项目数量。
广泛用于数据库和excel表格。

按照以下步骤在网页上添加谷歌饼图： 第一步：从一个简单的基本网页开始。 添加一个id为“piechart”的“div”元素：图片[1]-如何在网页上添加谷歌图表？-yiteyi-C++库

第2步：添加引用 添加对谷歌图表API的引用。通用域名格式。

第3步：添加JavaScript函数 图片[3]-如何在网页上添加谷歌图表？-yiteyi-C++库 说明： 下面的代码用于加载谷歌图表：图片[4]-如何在网页上添加谷歌图表？-yiteyi-C++库下面的代码用于绘制图表，并为每个分区设置用户特定的值：图片[5]-如何在网页上添加谷歌图表？-yiteyi-C++库下面的代码用于在id=“piechart”的“div”元素中显示图表：图片[6]-如何在网页上添加谷歌图表？-yiteyi-C++库 输入：

                       <!DOCTYPE html>                     
                       <                                  html                                  lang                                  =                                  "en-US"                                  >                     
                       <                                  body                                  >                     
                                
                       <                                  h1                                  >Time Allotment of a day</                                  h1                                  >                     
                                
                       <                                  div                                  id                                  =                                  "piechart"                                  ></                                  div                                  >                     
                                
                       <                                  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([                     
                                             ['Task', 'Hours per Day'],                     
                                             ['Work', 8],                     
                                             ['Eat', 2],                     
                                             ['TV', 4],                     
                                             ['Gym', 2],                     
                                             ['Sleep', 8]                     
                       ]);                     
                                             var options = {'title':'My Average Day', 'width':550, 'height':400};                     
                                             var chart =                     
                                             new google.visualization.PieChart(document.getElementById('piechart'));                     
                                             chart.draw(data, options);                     
                       }                     
                       </                                  script                                  >                     
                                
                       </                                  body                                  >                     
                       </                                  html                                  >                     

输出： 图片[7]-如何在网页上添加谷歌图表？-yiteyi-C++库

要获得3d饼图，请设置 “is3d” 选项为true： 输入：

                       <!DOCTYPE html>                     
                       <                                  html                                  lang                                  =                                  "en-US"                                  >                     
                       <                                  body                                  >                     
                                
                       <                                  h1                                  >Time Allotment of a day</                                  h1                                  >                     
                                
                       <                                  div                                  id                                  =                                  "piechart"                                  ></                                  div                                  >                     
                                
                       <                                  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([                     
                                             ['Task', 'Hours per Day'],                     
                                             ['Work', 8],                     
                                             ['Eat', 2],                     
                                             ['TV', 4],                     
                                             ['Gym', 2],                     
                                             ['Sleep', 8]                     
                       ]);                     
                                
                                             var options =                     
                                             {'title':'My Average Day',  'width':550,'height':400,is3D: true};                     
                                
                                             var chart =                     
                                             new google.visualization.PieChart(document.getElementById('piechart'));                     
                                             chart.draw(data, options);                     
                       }                     
                       </                                  script                                  >                     
                                
                       </                                  body                                  >                     
                       </                                  html                                  >                     

输出： 图片[9]-如何在网页上添加谷歌图表？-yiteyi-C++库

文章版权归作者所有，未经允许请勿转载。

THE END

技术文章