如何在 google 开发人员饼图中传递变量

Question

我在这里使用 pie chart，假设我给出静态值意味着它正在工作，而不是静态我想给出动态值，所以 ['Trip With Single Occupancy', 10], 而不是 10 我想给 SingleemployeeTraveld 这个变量，我试过了但没有用，如果有人知道请更新我的代码片段

google.setOnLoadCallback(drawChart);
          function drawChart() {
       
        var result = {
           "status": "success",
           "data": [
           {
             "SingleemployeeTraveld": "10",
             "TwoemployeeTraveld": "7",
             "ThreeemployeeTraveld": "4",
             "FouremployeeTraveld": "4",
           }
           ]
         }
        
         if(result['status'] == "success"){
          $.each( result['data'], function( key, value ) { 
          
           var SingleemployeeTraveld = value.SingleemployeeTraveld;
           var TwoemployeeTraveld = value.TwoemployeeTraveld;
           var ThreeemployeeTraveld = value.ThreeemployeeTraveld;
           var FouremployeeTraveld = value.FouremployeeTraveld;
           console.log(SingleemployeeTraveld);
           
           var data = google.visualization.arrayToDataTable(
           [
           
             ['Task', 'Hours per Day'],
             ['Trip With Single Occupancy',     10],
             ['Trip With Two Occupancy',      7],
             ['Trip With Three Occupancy',  8],
             ['Trip With Four Occupancy', 5]
           ]
          ); 
          
          var options = {
           title: 'My Daily Activities'
         };

         var chart = new google.visualization.PieChart(document.getElementById('piechart'));

         chart.draw(data, options);
          
          });
          
         }
       
      }

 <script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['corechart']}]}"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
           <div id="piechart" style="width: 900px; height: 500px;"></div>

Answer 1

首先将变量转换为 number 类型。

google.setOnLoadCallback(drawChart);

function drawChart() {

  var result = {
    "status": "success",
    "data": [{
      "SingleemployeeTraveld": "10",
      "TwoemployeeTraveld": "7",
      "ThreeemployeeTraveld": "4",
      "FouremployeeTraveld": "4",
    }]
  }

  if (result['status'] == "success") {
    $.each(result['data'], function(key, value) {

      var SingleemployeeTraveld = Number(value.SingleemployeeTraveld);
      var TwoemployeeTraveld = Number(value.TwoemployeeTraveld);
      var ThreeemployeeTraveld = Number(value.ThreeemployeeTraveld);
      var FouremployeeTraveld = Number(value.FouremployeeTraveld);
      console.log(SingleemployeeTraveld);

      var data = google.visualization.arrayToDataTable(
        [

          ['Task', 'Hours per Day'],
          ['Trip With Single Occupancy', SingleemployeeTraveld],
          ['Trip With Two Occupancy', TwoemployeeTraveld],
          ['Trip With Three Occupancy', ThreeemployeeTraveld],
          ['Trip With Four Occupancy', FouremployeeTraveld]
        ]
      );

      var options = {
        title: 'My Daily Activities'
      };

      var chart = new google.visualization.PieChart(document.getElementById('piechart'));

      chart.draw(data, options);
    });
  }
}

 <script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['corechart']}]}"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
           <div id="piechart" style="width: 900px; height: 500px;"></div>

如何在 google 开发人员饼图中传递变量

How to pass the variable in google developer pie chart

javascript

jquery

pie-chart