0
点赞
收藏
分享

微信扫一扫

Chart.js 图表数据指定颜色

zhoulujun 2023-03-03 阅读 70


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;?>]
},

 

举报

相关推荐

0 条评论