如何创建一个函数来呈现 Google 图表？

Question

我有 6 Google 个图表

我尝试创建一个函数，并调用了 6 次。

<script type="text/javascript">

    google.charts.load("current", {packages:["corechart"]});

    google.charts.setOnLoadCallback(drawChart());

    function drawChart(type,value) {
        var data = google.visualization.arrayToDataTable([
            ['Effort', 'Ammout given'],
            [type,     value],
            ['',     (100-value)]
            ]);

        var options = {
            pieHole: 0.9,
            legend: {position: 'none'},
            pieSliceText: { color: '#EC7108' },
            slices: {
                0: { color: '#EC7108' },
                1: { color: '#E5E5E5' }
            }


        };

        var chart = new google.visualization.PieChart(document.getElementById(type));
        chart.draw(data, options);

    }

    drawChart('html',90);
    drawChart('css',60);
    drawChart('js',70);
    drawChart('jquery',80);
    drawChart('react',60);
    drawChart('node',70);

</script>

我一直收到错误

这就是我现在拥有的，创建函数 6 次 ‍♂️，但它有效。

https://jsfiddle.net/bheng/0qcjn7zy/6/

如何只创建一个函数并调用它 6 次？

Answer 1

请检查这是否适合我。

您需要在方法中创建一个方法添加所有您想要显示图表的方法。

Code

<html>
<head>
 <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">


 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

 <style type="text/css">
  .col {
   display: inline-block;
  }
 </style>


</head>
<body>


 <div class="container">

  <h1>Google Charts</h1>


  <div class="row">

   <div class="col">
    <div id="html"></div>
   </div>
   <div class="col">
    <div id="css"></div>
   </div>
   <div class="col">
    <div id="js"></div>
   </div>
   <div class="col">
    <div id="jquery"></div>
   </div>
   <div class="col">
    <div id="react"></div>
   </div>
   <div class="col">
    <div id="node"></div>
   </div>
  </div>
 </div>
 
 <script type="text/javascript">

    google.charts.load("current", {packages:["corechart"]});
 function allChart()
 {
  drawChart('html',90);
  drawChart('css',60);
  drawChart('js',70);
  drawChart('jquery',80);
  drawChart('react',60);
  drawChart('node',70);
 }
 
    google.charts.setOnLoadCallback(allChart);

    function drawChart(type,value) {
        try 
  {
   var data = google.visualization.arrayToDataTable([
            ['Effort', 'Ammout given'],
            [type,     value],
            ['',     (100-value)]
            ]);

        var options = {
            pieHole: 0.9,
            legend: {position: 'none'},
            pieSliceText: { color: '#EC7108' },
            slices: {
                0: { color: '#EC7108' },
                1: { color: '#E5E5E5' }
            }


        };

        var chart = new google.visualization.PieChart(document.getElementById(type));
        chart.draw(data, options);
  }
  catch(e)
  {   
   console.log("Error "+e.message);
  }
    }   

</script>
</body>
</html>

检查这里 fiddle 代码也 Click me

如何创建一个函数来呈现 Google 图表？

How to create a function to render Google Charts?

html

javascript

css

jquery

google-visualization