使用ChartJS显示数据时遇到问题。我的数据可以正确显示,但使用ChartJS时无法正常显示。
我需要帮助。这是我的代码。
使用此代码时的截图页面
?>
<div class="contentDesc">
<div class="container-fluid">
<div class="row">
<div class="col-lg-8 s-dashboard">
<div class="panel panel-info">
<div class="panel-heading">
<h2 class="panel-title"><?php echo __('Status Ketersediaan Ijazah') ?></h2>
</div>
<div class="panel-body">
<div class="s-chart">
<canvas id="line-chartjs" width="175" height="315"></canvas>
</div>
</div>
<div class="panel-footer">
<table class="table">
<tr>
<td class="text-left"><i class="fa fa-square" style="color:#99FF33;"></i> <?php echo __('Ijazah Ada') ?></td>
<td class="text-right"><?php echo $get_total_ijazahada?></td>
</tr>
<tr>
<td class="text-left"><i class="fa fa-square" style="color:#337AB7;"></i> <?php echo __('Ijazah Sudah Dikembalikan') ?></td>
<td class="text-right"><?php echo $get_total_ijazahkembali?></td>
</tr>
</table>
</div>
</div>
</div>
<div class="col-lg-4 s-dashboard">
<div class="panel panel-default s-dashboard">
<div class="panel-heading">
<h2 class="panel-title"><?php echo __('Status Karyawan') ?></h2>
</div>
<div class="panel-body">
<div class="s-chart">
<canvas id="radar-chartjs" width="175" height="175"></canvas>
</div>
</div>
<div class="panel-footer">
<table class="table">
<tr>
<td class="text-left"><i class="fa fa-square" style="color:#f2f2f2;"></i> <?php echo __('Total Data Ijazah') ?></td>
<td class="text-right"><?php echo $get_total_ijazah?></td>
</tr>
<tr>
<td class="text-left"><i class="fa fa-square" style="color:#99FF33;"></i> <?php echo __('Karyawan Aktif') ?></td>
<td class="text-right"><?php echo $get_total_aktif?></td>
</tr>
<tr>
<td class="text-left"><i class="fa fa-square" style="color:#337AB7;"></i> <?php echo __('Karyawan Kontrak') ?></td>
<td class="text-right"><?php echo $get_total_kontrak?></td>
</tr>
<tr>
<td class="text-left"><i class="fa fa-square" style="color:#FF9F40;"></i> <?php echo __('Karyawan Harian') ?></td>
<td class="text-right"><?php echo $get_total_harian?></td>
</tr>
<tr>
<td class="text-left"><i class="fa fa-square" style="color:#FF6384;"></i> <?php echo __('Karyawan Resign') ?></td>
<td class="text-right"><?php echo $get_total_resign?></td>
</tr>
<tr>
<td class="text-left"><i class="fa fa-square" style="color:#C9CBCF;"></i> <?php echo __('Pelamar Batal Join') ?></td>
<td class="text-right"><?php echo $get_total_bataljoin?></td>
</tr>
<tr>
<td class="text-left"><i class="fa fa-square" style="color:#D9534F;"></i> <?php echo __('Pelamar Tidak Ada Kabar') ?></td>
<td class="text-right"><?php echo $get_total_tidakada?></td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
<script src="<?php echo JWB?>chartjs/Chart.min.js"></script>
<script>
$(function(){
var lineChartData = {
labels : [<?php echo $get_date?>],
datasets :
[
{
fillColor : "#99FF33",
data : [<?php echo $get_total_ijazahada?>]
},
{
fillColor : "#5D45BD",
data : [<?php echo $get_total_ijazahkembali?>]
}
]
}
var c = $('#line-chartjs');
var container = $(c).parent();
var ct = c.get(0).getContext("2d");
$(window).resize( respondCanvas );
function respondCanvas(){
c.attr('width', $(container).width() ); //max width
c.attr('height', $(container).height() ); //max height
//Call a function to redraw other content (texts, images etc)
var myChart = new Chart(ct).Bar(lineChartData,{
barShowStroke: true,
barDatasetSpacing : 2,
animation: false
});
}
respondCanvas();
var data = [
{
value : <?php echo $get_total_aktif?>,
color : "#99FF33",
label : "<?php echo __('Aktif'); ?>"
},
{
value : <?php echo $get_total_kontrak?>,
color : "#337AB7",
label : "<?php echo __('Kontrak'); ?>"
},
{
value : <?php echo $get_total_harian?>,
color : "#FF9F40",
label : "<?php echo __('Harian'); ?>"
},
{
value : <?php echo $get_total_resign?>,
color : "#FF6384",
label : "<?php echo __('Resign'); ?>"
},
{
value : <?php echo $get_total_bataljoin?>,
color : "#C9CBCF",
label : "<?php echo __('Batal Join'); ?>"
},
{
value : <?php echo $get_total_tidakada?>,
color : "#D9534F",
label : "<?php echo __('Tidak Ada Kabar'); ?>"
}
];
var r = $('#radar-chartjs');
var container = $(r).parent();
var rt = r.get(0).getContext("2d");
$(window).resize( respondCanvas );
function respondCanvasRadar(){
r.attr('width', $(container).width()); //max width
r.attr('height', $(container).height()); //max height
//Call a function to redraw other content (texts, images etc)
var myChart = new Chart(rt).Doughnut(data,{
animation: false,
segmentStrokeWidth : 1
});
}
respondCanvasRadar();
});
</script>