onchange無法使用&chart元件裡面放入變數

onchange chart 衝突陣列

tako9558 2017-05-10 13:55:25 ‧ 7213 瀏覽

分享至

不好意思，上一篇似乎程式碼沒有完整，先再發一篇

想要透過select表單的值來控制chart的數據
不過卡在兩個地方
1.加上 <script src="Chart.js"
之後，原先能使用的onchange函式就無法使用了
顯示Uncaught ReferenceError: monthsearch is not defined
at HTMLSelectElement.onchange，可是不加上這行就無法使用chart元件了

2.原本在從php的數據內已經抓到了想要的數值
月份在資料表內有1~12還有相對應的total數據，我已經把這兩個切成兩個陣列
NewArray[0]和NewArray[1]，各分為1~4、5~8、9~12以及相對應的total值，可是不曉得要如何放到labels和data裡面，想問有什麼方法?

程式碼 :
index.php

  <html> 
  <head> 
  <script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
 
   <script>
function monthsearch(a)
	{
	var month=a.value;
	console.log(month);
    $.ajax({
        url: "monthchaeck.php",
        data: "&month="+month,
        type:"POST",
        dataType:'text',
		
        success: function(message){
            
			var a=message;
			var NewArray = new Array();
　			var NewArray = a.split("<br>");
			console.log(NewArray[0],NewArray[1]);
			document.getElementById("monthshow2").innerHTML=NewArray[0]; 
			document.getElementById("monthshow3").innerHTML=NewArray[1];
        },

        error: function(jqXHR, textStatus, errorThrown){ 
            document.getElementById("monthshow").innerHTML=errorThrown; 
        }
	});
	
	}
</script>
<script>
window.onload = function(){

var ctx = document.getElementById('myChart');
var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['一月', '二月', '三月','四月 '],
    datasets: [{
    type: 'bar',
      label: '銷售業績(百萬)',
      data: ['77', '99', '72','80']
	  
    }, {
      type: 'line',
      label: '新開發客戶',
      data: ['25', '99', '30','90']
    }]
  }
});

};
</script>

<style>
#chart{
	position:absolute;
	

	
}
#box{
	width:400px;
  border:1px solid #cccccc;
}

</style>
</head>


<body>
<select id="month" onchange="monthsearch(this)">
<option value="1">一月到四月
<option value="5">五月到八月
<option value="9">九月到十二月
</select>
<span id='monthshow'></span><br>
<span id='monthshow2'></span><br>
<span id='monthshow3'></span><br>
<div id='box'>	
		<canvas id="myChart" ></canvas>	
</div>
</body>
</html>

monthchaeck.php

<?php
header("Content-Type: text/html; charset=utf-8");
$start=$_POST['month'];
$end=$start+3;

$db_host = "localhost";
	$db_username = "root";
	$db_password = "a123456s";
	//連線伺服器
	$month=array();
	$total=array();
	$db_link = @mysqli_connect($db_host, $db_username, $db_password);
	if (!$db_link) die("資料連結失敗！");
	//設定字元集與編碼
	mysqli_query($db_link, "SET NAMES utf8");	
	$seldb = @mysqli_select_db($db_link, "test");
	if (!$seldb) die("資料庫選擇失敗！");
	$sql_query = "SELECT month FROM month where month between $start and $end";
	$result = mysqli_query($db_link, $sql_query);	
		while($row_result=mysqli_fetch_assoc($result)){
		foreach($row_result as $value){
			$month[]=$value;			
		}		
	}
			foreach($month as $value){
			echo $value." ";		
		}
			echo "<br>";
		$sql_query = "SELECT total FROM month where month between $start and $end";
	$result = mysqli_query($db_link, $sql_query);	
		while($row_result=mysqli_fetch_assoc($result)){
		foreach($row_result as $value){
			$total[]=$value;			
		}		
	}
		
			foreach($total as $value){
			echo $value." ";		
		}
?>