下面是我的代码,用于显示基于使用PHP从数据库获取的值的条形图。
HTML:
<div style="width: 20%" id="graphDis">
<canvas id="barGraph" Style="width:100px;height:70px;" ></canvas>
</div>
Jquery和Ajax:
$.ajax({
url: 'php/performanceDetails.php',
type: 'get',
data: 'id=' + id,
success: function(data) {
var $response=$(data);
var selectedPerson = $response.filter('#selectedPerson ').text();
var nationalAvg = $response.filter('#nationalAvg').text();
var stateAvg = $response.filter('#stateAvg').text();
var barChartData = {
labels : ["Selected Person","National Avg","State Avg"],
datasets : [
{
fillColor : "rgba(220,220,220,0.5)",
strokeColor : "rgba(220,220,220,0.8)",
highlightFill: "rgba(220,220,220,0.75)",
highlightStroke: "rgba(220,220,220,1)",
data : [selectedPerson,nationalAvg,stateAvg]
}
]
}
window.onload = function(){
var ctx = document.getElementById("barGraph").getContext("2d");
window.myBar = new Chart(ctx).Bar(barChartData, {
responsive : true
});
}
当我提出一个断点并使用fire bug调试代码时它的工作正常但是如果我删除断点并调试它不会显示条形图。我尝试过使用不同值的setTimeout,然后它也无法正常工作。 哪里我做错了?