Chart.js 图表数据指定颜色

    const SUPPLIER_TYPE_INTERANAL = "Internal";
    const SUPPLIER_TYPE_SUPPLIER = "Supplier";
    const SUPPLIER_TYPE_CUSTOMER = "Customer";
    const SUPPLIER_TYPE_OTHER = "Other";
    public static $supplierTypeMap = [
        self::SUPPLIER_TYPE_INTERANAL,
        self::SUPPLIER_TYPE_SUPPLIER,
        self::SUPPLIER_TYPE_CUSTOMER,
        self::SUPPLIER_TYPE_OTHER,
    ];
    public static $supplierTypeColorMap = [
        self::SUPPLIER_TYPE_INTERANAL => "#5fbc5f",
        self::SUPPLIER_TYPE_SUPPLIER => "#f5b04f",
        self::SUPPLIER_TYPE_CUSTOMER => "#5bbfde",
        self::SUPPLIER_TYPE_OTHER => "#4a5a74",
    ];

枚举绑定类型， 类型指定颜色

 

    foreach ($ncrResourceChart as $key => $chart) {
      if(intval($chart['count']) > 0){
        $resourceArr[] = $chart['suppliertype'];
        $resourceCountArr[] = $chart['count'];
        $resourceColorArr[] = MRB::$supplierTypeColorMap[$chart['suppliertype']];
      }
    }

使用枚举

返回到页面  使用

                var ncr_source_chart = document.getElementById("ncrSourceChart");
                var ncrSourceChart = new Chart(ncr_source_chart, {
                    type: 'pie',
                    data: {
                        datasets: [{
                            data: [<?php echo $this->resourceCountArr;?>],
                            backgroundColor: [ <?php echo $this->resourceColorArr;?>],
                        }],

                        // These labels appear in the legend and in the tooltips when hovering different arcs
                        labels: [<?php echo $this->resourceArr;?>]
                    },