我正在尝试用mysql dataset实现chartjs doughnut。代码没有任何错误，但图表没有显示在画布上。也不显示数据图例。任何支持在这个问题上将不胜感激。

型号

项目的模型提取显示如下：

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;
    }

字符串

控制器

项目的控制器提取显示如下：

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 );

    }

型

js代码

项目的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)
    }
  });

型

输出

的数据
如果我将js中的最后一行代码改为：

pieChart.Bar(PieData, pieOptions)

型
显示的图表不含随机颜色：

的