前台
前台三种样式的代码(包括:<!-- areaChart --><!-- lineChart --><!-- barChart -->):
<div class="chart tab-pane active" style="float:left;position: relative; height: 276px;width:86%;border: 1px solid red;">
<!-- areaChart -->
<div class="chart">
<canvas id="areaChart" style="height:276px"></canvas>
</div>
<!-- lineChart
<div class="chart">
<canvas id="lineChart" style="height:276px"></canvas>
</div>-->
<!-- barChart
<div class="chart">
<canvas id="barChart" style="height:276px"></canvas>
</div>-->
</div>
js
// Get context with jQuery - using jQuery's .get() method.
var areaChartCanvas = $('#areaChart').get(0).getContext('2d')
// This will get the first returned node in the jQuery collection.
var areaChart = new Chart(areaChartCanvas)
/* jsonobj will get json's object */
var jsonObj;
$.ajax({
type :"post",
url :"/AdminLTE-2.4.5-instance/dist/js/pages/ConnectCharts2.php",
async :false,
success :function(data,status){
//json's data -->> json's object
jsonObj= $.parseJSON(data);
}
});
// labels-y data-(TDC_PlanningHC TDC_EntryHC TDC_ExitHC) obj
var jsonArr_y = [];
for(var i=0 ;i<jsonObj.length;i++)
{
jsonArr_y[i] = jsonObj[i].y;
}
alert(jsonArr_y);
var jsonArr_TDC_PlanningHC = [];
for(var i=0 ;i<jsonObj.length;i++)
{
jsonArr_TDC_PlanningHC[i] = jsonObj[i].TDC_PlanningHC;
}
alert(jsonArr_TDC_PlanningHC);
var jsonArr_TDC_EntryHC = [];
for(var i=0 ;i<jsonObj.length;i++)
{
jsonArr_TDC_EntryHC[i] = jsonObj[i].TDC_EntryHC;
}
alert(jsonArr_TDC_EntryHC);
var jsonArr_TDC_ExitHC = [];
for(var i=0 ;i<jsonObj.length;i++)
{
jsonArr_TDC_ExitHC[i] = jsonObj[i].TDC_ExitHC;
}
alert(jsonArr_TDC_ExitHC);
//through jsonObj to get json's array
var jsonArr = [];
for(var i =0 ;i < jsonObj.length;i++)
{
jsonArr[i] = jsonObj[i];
}
/*
labels : ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'June'],
data : [65, 59, 80, 81, 56, 55, 40, 55]
data : [28, 48, 40, 19, 86, 27, 90, 27]
*/