如何在谷歌开发者饼图中传递变量

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类型。

＆＃13;

＆＃13;

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);
    });
  }
}

＆＃13;

 <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>

＆＃13;

＆＃13;

＆＃13;