javascript - 如何在 Google Chart 中添加动态值

标签 javascript html css graph

当我在 Google 图表中添加动态值时，它不显示图表。值已成功添加到控制台的表中，但未显示图形。为什么？我在这里做错了吗？

请阅读我的代码并给我一些解决方案。

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- Custom CSS -->
    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <script src="js/jquery.js"></script>
    <!-- Bootstrap Core JavaScript -->
    <script src="js/bootstrap.min.js"></script>
    <script src="js/bootstrap.js"></script>
</head>
<body>
<br/>
<div class="container">
  <h2>Enter Information Here..</h2>
<form method="post">
	
	<table border="1">
		<tr>
			<th>Position</th>
			<th>Member 1</th>
			<th>Member 2</th>
			<th>Member 3</th>
			<th>Member 4</th>	
		</tr>

		<tr>
			<td>Name</td>
			<td><input class="form-control" name="name" type="text" id="name1"></td>
			<td><input class="form-control" type="text" id="name2"></td>
			<td><input class="form-control" type="text"  id="name3"></td>
			<td><input class="form-control" type="text"  id="name4"></td>
		</tr>
		<tr>
			<td>Opportunity Cost/ Salary</td>
			<td><input class="form-control" name="salary" type="text" id="salary1"></td>
			<td><input class="form-control" type="text" id="salary2"></td>
			<td><input class="form-control" type="text"  id="salary3"></td>
			<td><input class="form-control" type="text"  id="salary4"></td>
		</tr>
		<tr>
			<td>Hours worked</td>
			<td><input class="form-control" name="hours" type="text" id="hours1"></td>
			<td><input class="form-control" type="text" id="hours2"></td>
			<td><input class="form-control" type="text"  id="hours3"></td>
			<td><input class="form-control" type="text"  id="hours4"></td>
		</tr>
		<tr>
			<td>Invested Cash</td>
			<td><input class="form-control" name="icash" type="text"  id="invested_cash1"></td>
			<td><input class="form-control" type="text"  id="invested_cash2"></td>
			<td><input class="form-control" type="text"  id="invested_cash3"></td>
			<td><input class="form-control" type="text"  id="invested_cash4"></td>
		</tr>
		<tr>
			<td>Contributed Cash</td>
			<td><input class="form-control" name="ccash" type="text"  id="contributed_cash1"></td>
			<td><input class="form-control" type="text"  id="contributed_cash2"></td>
			<td><input class="form-control" type="text"  id="contributed_cash3"></td>
			<td><input class="form-control" type="text"  id="contributed_cash4"></td>
		</tr>		
		<tr>
			<td>Date joined the project</td>
			<td><input class="form-control" name="date" type="date"  id="date1"></td>
			<td><input class="form-control" type="date"  id="date2"></td>
			<td><input class="form-control" type="date"  id="date3"></td>
			<td><input class="form-control" type="date"  id="date4"></td>			
		</tr>
		<tr>
			<td>Your Share $</td>
			<td><input class="form-control" name="share" type="text" id="share$_1"></td>
			<td><input class="form-control" type="text" id="share$_2"></td>
			<td><input class="form-control" type="text" id="share$_3"></td>
			<td><input class="form-control" type="text" id="share$_4"></td>	
			<td><input class="form-control" type="text" id="share$_total"></td>			
		</tr>
		<tr>
			<td>Your Share %</td>
			<td><input class="form-control" name="yshare" type="text" id="share_1"></td>
			<td><input class="form-control" type="text" id="share_2"></td>
			<td><input class="form-control" type="text" id="share_3"></td>
			<td><input class="form-control" type="text" id="share_4"></td>		
			<td><input class="form-control" type="text" id="share_total"></td>				
		</tr>
	</table>
	<br/>
  <div class="form-group row">
	<button type="button" onclick="getPrice(); drawChart();" class="btn btn-primary">Calcuate</button>

	<!-- <input type="submit" name="submit" value="Append"  class="btn btn-primary">-->
  </div> 

</form>

</div>
</div>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script>
 var share1;
 var share2,share3,share4;
		
	function getPrice() {    
	
	/* Get salary */
		 var salary1 = parseFloat(document.getElementById("salary1").value);
		 var salary2 = parseFloat(document.getElementById("salary2").value);
		 var salary3 = parseFloat(document.getElementById("salary3").value);
		 var salary4 = parseFloat(document.getElementById("salary4").value);		 
	/* Get Hours */	 
		 var hours1 = parseFloat(document.getElementById("hours1").value);
		 var hours2 = parseFloat(document.getElementById("hours2").value);
		 var hours3 = parseFloat(document.getElementById("hours3").value);
		 var hours4 = parseFloat(document.getElementById("hours4").value);				 
	/* Get Invested Cash */
		var invested_cash1 = parseFloat(document.getElementById("invested_cash1").value);		 
		var invested_cash2 = parseFloat(document.getElementById("invested_cash2").value);	
		var invested_cash3 = parseFloat(document.getElementById("invested_cash3").value);		
		var invested_cash4 = parseFloat(document.getElementById("invested_cash4").value);		 		
	/* Get Contributed Cash */ 
		var contributed_cash1 = parseFloat(document.getElementById("contributed_cash1").value);						
		var contributed_cash2 = parseFloat(document.getElementById("contributed_cash2").value);			 		 		
		var contributed_cash3 = parseFloat(document.getElementById("contributed_cash3").value);				 		 
		var contributed_cash4 = parseFloat(document.getElementById("contributed_cash4").value);
	
		var invested_cash1 = hours1;
		var contributed_cash1 = contributed_cash1;
		var non_cash1 = invested_cash1 * 51.14;
		var contribution_cash1  = contributed_cash1 * 4
		var your_share1 = non_cash1 + contribution_cash1;
		
		var invested_cash2 = hours2;
		var contributed_cash2 = contributed_cash2;
		var non_cash2 = invested_cash2 * 51.14;
		var contribution_cash2  = contributed_cash2 * 4
		var your_share2 = non_cash2 + contribution_cash2;
		
		var invested_cash3 = hours3;
		var contributed_cash3 = contributed_cash3;
		var non_cash3 = invested_cash3 * 51.14;
		var contribution_cash3  = contributed_cash3 * 4
		var your_share3 = non_cash3 + contribution_cash3;
		
		var invested_cash4 = hours4;
		var contributed_cash4 = contributed_cash4;
		var non_cash4 = invested_cash4 * 51.14;
		var contribution_cash4  = contributed_cash4 * 4
		var your_share4 = non_cash4 + contribution_cash4;
		
		 var invested_cash = hours1 + hours2 + hours3 + hours4;
		 var contributed_cash = contributed_cash1 + contributed_cash2 + contributed_cash3 + contributed_cash4;
		 var non_cash = invested_cash * 51.14;
		 var contribution_cash  = contributed_cash * 4
		 
		 var your_share = non_cash + contribution_cash;
		 
		document.getElementById("share$_1").value = "$" + your_share1.toFixed(2);
		document.getElementById("share$_2").value = "$" + your_share2.toFixed(2);
		document.getElementById("share$_3").value = "$" + your_share3.toFixed(2);
		document.getElementById("share$_4").value = "$" + your_share4.toFixed(2);
		
		var total = your_share1 + your_share2 + your_share3 + your_share4;
		document.getElementById("share$_total").value = total.toFixed(2);
		share1 = ((your_share1/total) * 100).toFixed(2);
		share2 = ((your_share2/total) * 100).toFixed(2);
		share3 = ((your_share3/total) * 100).toFixed(2);
		share4 = ((your_share4/total) * 100).toFixed(2);
		
		var share_total = parseFloat(share1) + parseFloat(share2)+ parseFloat(share3)+ parseFloat(share4);
		document.getElementById("share_1").value = share1 + "%";
		document.getElementById("share_2").value = share2 + "%";
		document.getElementById("share_3").value = share3 + "%";
		document.getElementById("share_4").value = share4 + "%";
		document.getElementById("share_total").value = Math.round(share_total) + "%";


		drawChart();

	}

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

      function drawChart() {
        var value1 = share1;     
        var value2 = share2;
        var value3 = share3;
        var value4 = share4;
        var data = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
          ['Work', value1],
          ['Eat', value2],
          ['Commute', value3],
          ['Watch TV', value4]
        ]);

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

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

        chart.draw(data, options);
      }
    </script>
    <div id="piechart" style="width: 900px; height: 500px;"></div>
</body>
</html>

最佳答案

怎么了! 解决了! 你所有的值(value)观都是字符串!这些被称为错误 它也被称为这样的错误

Uncaught Error: Bootstrap tooltips require

并且你必须在bootstrap.min.js之前添加脚本

link()

一定是这样

<head>
    <title>YourTitle</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
    <!-- Custom CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.css" />
    <!-- <link href="css/style.css" rel="stylesheet"> -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
    <!-- Bootstrap Core JavaScript -->
    <script src="https://npmcdn.com/tether@1.2.4/dist/js/tether.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.js"></script>
</head>


<!DOCTYPE html>
<html>

<head>
  <title>YourTitle</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
  <!-- Custom CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.css" />
  <!-- <link href="css/style.css" rel="stylesheet"> -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
  <!-- Bootstrap Core JavaScript -->
  <script src="https://npmcdn.com/tether@1.2.4/dist/js/tether.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.js"></script>
</head>

<body>
  <br/>
  <div class="container">
    <h2>Enter Information Here..</h2>
    <form method="post">

      <table border="1">
        <tr>
          <th>Position</th>
          <th>Member 1</th>
          <th>Member 2</th>
          <th>Member 3</th>
          <th>Member 4</th>
        </tr>

        <tr>
          <td>Name</td>
          <td><input class="form-control" name="name" type="text" id="name1"></td>
          <td><input class="form-control" type="text" id="name2"></td>
          <td><input class="form-control" type="text" id="name3"></td>
          <td><input class="form-control" type="text" id="name4"></td>
        </tr>
        <tr>
          <td>Opportunity Cost/ Salary</td>
          <td><input class="form-control" name="salary" type="text" id="salary1"></td>
          <td><input class="form-control" type="text" id="salary2"></td>
          <td><input class="form-control" type="text" id="salary3"></td>
          <td><input class="form-control" type="text" id="salary4"></td>
        </tr>
        <tr>
          <td>Hours worked</td>
          <td><input class="form-control" name="hours" type="text" id="hours1"></td>
          <td><input class="form-control" type="text" id="hours2"></td>
          <td><input class="form-control" type="text" id="hours3"></td>
          <td><input class="form-control" type="text" id="hours4"></td>
        </tr>
        <tr>
          <td>Invested Cash</td>
          <td><input class="form-control" name="icash" type="text" id="invested_cash1"></td>
          <td><input class="form-control" type="text" id="invested_cash2"></td>
          <td><input class="form-control" type="text" id="invested_cash3"></td>
          <td><input class="form-control" type="text" id="invested_cash4"></td>
        </tr>
        <tr>
          <td>Contributed Cash</td>
          <td><input class="form-control" name="ccash" type="text" id="contributed_cash1"></td>
          <td><input class="form-control" type="text" id="contributed_cash2"></td>
          <td><input class="form-control" type="text" id="contributed_cash3"></td>
          <td><input class="form-control" type="text" id="contributed_cash4"></td>
        </tr>
        <tr>
          <td>Date joined the project</td>
          <td><input class="form-control" name="date" type="date" id="date1"></td>
          <td><input class="form-control" type="date" id="date2"></td>
          <td><input class="form-control" type="date" id="date3"></td>
          <td><input class="form-control" type="date" id="date4"></td>
        </tr>
        <tr>
          <td>Your Share $</td>
          <td><input class="form-control" name="share" type="text" id="share$_1"></td>
          <td><input class="form-control" type="text" id="share$_2"></td>
          <td><input class="form-control" type="text" id="share$_3"></td>
          <td><input class="form-control" type="text" id="share$_4"></td>
          <td><input class="form-control" type="text" id="share$_total"></td>
        </tr>
        <tr>
          <td>Your Share %</td>
          <td><input class="form-control" name="yshare" type="text" id="share_1"></td>
          <td><input class="form-control" type="text" id="share_2"></td>
          <td><input class="form-control" type="text" id="share_3"></td>
          <td><input class="form-control" type="text" id="share_4"></td>
          <td><input class="form-control" type="text" id="share_total"></td>
        </tr>
      </table>
      <br/>
      <div class="form-group row">
        <button type="button" onclick="getPrice(); drawChart();" class="btn btn-primary">Calcuate</button>

        <!-- <input type="submit" name="submit" value="Append"  class="btn btn-primary">-->
      </div>

    </form>

  </div>
  </div>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script>
    var share1;
    var share2, share3, share4;

    function getPrice() {

      /* Get salary */
      var salary1 = parseFloat(document.getElementById("salary1").value);
      var salary2 = parseFloat(document.getElementById("salary2").value);
      var salary3 = parseFloat(document.getElementById("salary3").value);
      var salary4 = parseFloat(document.getElementById("salary4").value);
      /* Get Hours */
      var hours1 = parseFloat(document.getElementById("hours1").value);
      var hours2 = parseFloat(document.getElementById("hours2").value);
      var hours3 = parseFloat(document.getElementById("hours3").value);
      var hours4 = parseFloat(document.getElementById("hours4").value);

      var invested_cash1 = 1;
      var contributed_cash1 = 2;
      var non_cash1 = invested_cash1 * 51.14;
      var contribution_cash1 = contributed_cash1 * 4;
      var your_share1 = non_cash1 + contribution_cash1;

      var invested_cash2 = 2;
      var contributed_cash2 = 2;
      var non_cash2 = invested_cash2 * 51.14;
      var contribution_cash2 = contributed_cash2 * 4;
      var your_share2 = non_cash2 + contribution_cash2;

      var invested_cash3 = 2;
      var contributed_cash3 = 2;
      var non_cash3 = invested_cash3 * 51.14;
      var contribution_cash3 = contributed_cash3 * 4;
      var your_share3 = non_cash3 + contribution_cash3;

      var invested_cash4 = 2;
      var contributed_cash4 = 2;
      var non_cash4 = invested_cash4 * 51.14;
      var contribution_cash4 = contributed_cash4 * 4;
      var your_share4 = non_cash4 + contribution_cash4;

      var invested_cash = hours1 + hours2 + hours3 + hours4;
      var contributed_cash = contributed_cash1 + contributed_cash2 + contributed_cash3 + contributed_cash4;
      var non_cash = invested_cash * 51.14;
      var contribution_cash = contributed_cash * 4;

      var your_share = non_cash + contribution_cash;

      document.getElementById("share$_1").value = "$" + your_share1.toFixed(2);
      document.getElementById("share$_2").value = "$" + your_share2.toFixed(2);
      document.getElementById("share$_3").value = "$" + your_share3.toFixed(2);
      document.getElementById("share$_4").value = "$" + your_share4.toFixed(2);

      var total = your_share1 + your_share2 + your_share3 + your_share4;
      document.getElementById("share$_total").value = total.toFixed(2);
      share1 = ((your_share1 / total) * 100).toFixed(2);
      share2 = ((your_share2 / total) * 100).toFixed(2);
      share3 = ((your_share3 / total) * 100).toFixed(2);
      share4 = ((your_share4 / total) * 100).toFixed(2);

      var share_total = parseFloat(share1) + parseFloat(share2) + parseFloat(share3) + parseFloat(share4);
      document.getElementById("share_1").value = share1 + "%";
      document.getElementById("share_2").value = share2 + "%";
      document.getElementById("share_3").value = share3 + "%";
      document.getElementById("share_4").value = share4 + "%";
      document.getElementById("share_total").value = Math.round(share_total) + "%";


      drawChart();

    }


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

    function drawChart() {
      var value1 = parseFloat(share1);
      var value2 = parseFloat(share2);
      var value3 = parseFloat(share3);
      var value4 = parseFloat(share4);
      alert("" + value1 + " " + typeof(value1));
      alert("" + value2 + " ");
      alert("" + value3 + " ");
      alert("" + value4 + " ");
      var data = google.visualization.arrayToDataTable([
        ['Task', 'Hours per Day'],
        ['Work', value1],
        ['Eat', value2],
        ['Commute', value3],
        ['Watch TV', value4]
      ]);

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

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

      chart.draw(data, options);
    }
  </script>
  <div id="piechart" style="width: 900px; height: 500px;"></div>
</body>

</html>

希望对你有帮助!

关于javascript - 如何在 Google Chart 中添加动态值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43601437/

上一篇：javascript 在滚动到 div 时给出类 (1) 并在离开 div 时删除类 (1) 更改为类 (2)？

下一篇：html - 网格对齐问题

相关文章：

javascript - 使用 Node.js 在 RPi 上播放本地文件

php - preg 替换 twitter 状态和 http 或 https PHP

html - 在相对父容器中居中绝对按钮的正确方法

iphone - Flex 4与JavaScript选项( Cappuccino ，JQuery等)

php - Bootstrap jumbotron 自动根据内容量改变大小

javascript - 创建包含原始对象元素的新对象

javascript - pm2启动创建奇怪的文件

javascript - 如何在 JS 中调用 PHP mail() 函数？

css - 如何在 html 网格上完美对齐 svg 网格

javascript - 在 anchor 上平滑滚动

©2024 IT工具网  联系我们