ChartJS显示不正确

时间:2017-06-11 09:01:03

标签: javascript html5 chart.js

使用ChartJS显示数据时遇到问题。我的数据可以正确显示,但使用ChartJS时无法正常显示。

我需要帮助。这是我的代码。

使用此代码时的截图页面

[1]

?>
<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>&nbsp;&nbsp;<?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>&nbsp;&nbsp;<?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>&nbsp;&nbsp;<?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>&nbsp;&nbsp;<?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>&nbsp;&nbsp;<?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>&nbsp;&nbsp;<?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>&nbsp;&nbsp;<?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>&nbsp;&nbsp;<?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>&nbsp;&nbsp;<?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>

0 个答案:

没有答案