CodeIgnitor+Chart.js环形图加载MySQL数据空白问题求助

尝试基于MySQL数据集实现Chart.js环形图，代码无报错但画布上无法显示图表，图例也未展示。将JS代码最后一行改为柱状图调用，图表可显示但无随机颜色。

Model代码片段 #

public function getChart3() {
        //current month vehicle make count pie chart query
        $query = $this->db->query( "SELECT ci_vehicle_make.vehicle_make AS 'vehicleMake', count(ci_vehicle_make.vehicle_make) AS 'totalCount'
                FROM ci_parking
                JOIN ci_vehicle ON ci_parking.vehicle_id=ci_vehicle.vehicle_id
                JOIN ci_vehicle_make ON ci_vehicle.vehicle_make_id=ci_vehicle_make.vehicle_make_id
                JOIN ci_vehicle_type ON ci_vehicle.vehicle_type_id=ci_vehicle_type.vehicle_type_id
                WHERE MONTH(ci_parking.parking_entry) = MONTH(CURRENT_DATE())
                AND YEAR(ci_parking.parking_entry) = YEAR(CURRENT_DATE())
                AND ci_parking.is_deleted = 0
                GROUP BY ci_vehicle_make.vehicle_make" );
        $res = $query->result();
        return $res;
}

Controller代码片段 #

public function getChart3() {

        $data = $this->dashboard->getChart3();
        echo( json_encode( $data ) );

}

public function index() {
    
        $data[ 'chart3' ] = $this->dashboard->getChart3();

        $this->load->view( 'admin/dashboard/index', $data );

}

JavaScript代码 #

var pieChartCanvas = $('#pieChart').get(0).getContext('2d')
var pieChart = new Chart(pieChartCanvas)

$.ajax({
    url:"<?php echo base_url("/admin/dashboard/getChart3"); ?>",
    method:"GET",
    data:{action:'fetch'},
    dataType:"JSON",
    success:function(data) {

        var vehicle_Make = [];
        var total_Count = [];
        var piecolor = [];
        var len = data.length;

        for (var i = 0; i < len; i++) {
            var randomColor = Math.floor(Math.random()*16777215).toString(16);
            vehicle_Make.push(data[i]['vehicleMake']);
            total_Count.push(data[i]['totalCount']);
            randomColor = "#" + randomColor;
            piecolor.push(randomColor);
        }

        //output data
        console.log(vehicle_Make);
        console.log(total_Count);
        console.log(piecolor);

        var PieData = {
            labels: vehicle_Make,
            datasets:[
                {
                    data     : total_Count,
                    color    : piecolor,
                    highlight: piecolor,
                    label    : 'Vehicle Make',
                }
            ]
        }

        var pieOptions     = {
            //Boolean - Whether we should show a stroke on each segment
            segmentShowStroke    : true,
            //String - The colour of each segment stroke
            segmentStrokeColor   : '#fff',
            //Number - The width of each segment stroke
            segmentStrokeWidth   : 2,
            //Number - The percentage of the chart that we cut out of the middle
            percentageInnerCutout: 50, // This is 0 for Pie charts
            //Number - Amount of animation steps
            animationSteps       : 100,
            //String - Animation easing effect
            animationEasing      : 'easeOutBounce',
            //Boolean - Whether we animate the rotation of the Doughnut
            animateRotate        : true,
            //Boolean - Whether we animate scaling the Doughnut from the centre
            animateScale         : false,
            //Boolean - whether to make the chart responsive to window resizing
            responsive           : true,
            // Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container
            maintainAspectRatio  : true,
            //String - A legend template
            legendTemplate       : '<ul class="<%=name.toLowerCase()%>-legend"><% for (var i=0; i<segments.length; i++){%><li><span style="background-color:<%=segments[i].fillColor%>"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>'
        }
        //Create pie or douhnut chart
        // You can switch between pie and douhnut using the method below.
        //pieChart.Pie(PieData, pieOptions)
        pieChart.Doughnut(PieData, pieOptions)
    }
});

输出情况 #

• 环形图调用时：画布无图表，图例不展示，控制台数据正常（如图）
  
• 改为柱状图调用时：图表显示但无随机颜色（如图）
  

问题原因及解决方案 #

核心问题 #

你使用的是Chart.js v1.x版本，但数据格式中的颜色字段名错误：v1.x中饼图/环形图需要用fillColor/highlightFill，而非你代码中的color/highlight；柱状图同理，颜色字段名不匹配导致无颜色显示。

修正后的JavaScript代码 #

var pieChartCanvas = $('#pieChart').get(0).getContext('2d');

$.ajax({
    url:"<?php echo base_url("/admin/dashboard/getChart3"); ?>",
    method:"GET",
    data:{action:'fetch'},
    dataType:"JSON",
    success:function(data) {

        var vehicle_Make = [];
        var total_Count = [];
        var fillColors = [];
        var highlightColors = [];
        var len = data.length;

        for (var i = 0; i < len; i++) {
            var randomColor = Math.floor(Math.random()*16777215).toString(16);
            var baseColor = "#" + randomColor;
            // 生成高亮色（可选，比基础色稍亮）
            var highlightColor = "#" + Math.floor(Math.random()*16777215).toString(16);
            
            vehicle_Make.push(data[i]['vehicleMake']);
            total_Count.push(data[i]['totalCount']);
            fillColors.push(baseColor);
            highlightColors.push(highlightColor);
        }

        // 修正环形图数据格式
        var doughnutData = {
            labels: vehicle_Make,
            datasets:[
                {
                    data: total_Count,
                    fillColor: fillColors,    // 替换原color字段
                    highlightFill: highlightColors, // 替换原highlight字段
                    label: 'Vehicle Make'
                }
            ]
        };

        var pieOptions = {
            segmentShowStroke: true,
            segmentStrokeColor: '#fff',
            segmentStrokeWidth: 2,
            percentageInnerCutout: 50,
            animationSteps: 100,
            animationEasing: 'easeOutBounce',
            animateRotate: true,
            animateScale: false,
            responsive: true,
            maintainAspectRatio: true,
            legendTemplate: '<ul class="<%=name.toLowerCase()%>-legend"><% for (var i=0; i<segments.length; i++){%><li><span style="background-color:<%=segments[i].fillColor%>"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>'
        };

        // 正确初始化环形图
        new Chart(pieChartCanvas).Doughnut(doughnutData, pieOptions);
        
        // 若需切换柱状图，使用以下修正后的代码
        /*
        var barData = {
            labels: vehicle_Make,
            datasets: [{
                label: 'Vehicle Make',
                fillColor: fillColors,
                strokeColor: fillColors.map(c => c.replace('#', '#88')), // 生成对应边框色
                data: total_Count
            }]
        };
        new Chart(pieChartCanvas).Bar(barData, {responsive: true, maintainAspectRatio: true});
        */
    }
});

额外检查项 #

1. 确认页面引入的是Chart.js v1.x版本，若为v2.x+，API和数据格式完全不同，需重新适配
2. 检查画布元素<canvas id="pieChart"></canvas>是否设置了合理的宽高，避免因尺寸为0导致图表不显示
3. 确认AJAX返回的data数组有有效数据（控制台已打印验证，此步可忽略）

内容的提问来源于stack exchange，提问作者user2439257