需要注意:要把中文字体放到pchart插件库的字体文件夹里面,放其他地方都不生效。(巨坑!!!)
1.安装
composer require pchart/c-pchart
2.代码
/* 准备一些好的数据和轴配置 */
$data = new Data();
$data->addPoints([40, 20, 15, 10, 8, 4, 4], "ScoreA");
$data->addPoints([8, 10, 12, 20, 30, 15, 4], "ScoreB");
$data->addPoints([11, 12, 13, 14, 15, 18, 4], "ScoreC");
$data->addPoints([1, 2, 3, 4, 5, 6, 4], "ScoreD");
$data->setSerieDescription("ScoreA", "我的");
$data->setSerieDescription("ScoreB", "平均分");
$data->setSerieDescription("ScoreC", "最高分");
$data->setSerieDescription("ScoreD", "最低分");
/*创建X系列*/
$data->addPoints(["创新", "实践", "身心", "文化", "职业", "公益", "思想"], "Labels");
$data->setAbscissa("Labels");
/* 创建Image对象 */
$image = new Image(700, 400, $data);
/* 绘制实心背景 */
$settings = array("R"=>255, "G"=>255, "B"=>255, "Dash"=>1, "DashR"=>255, "DashG"=>255, "DashB"=>255);
$image->drawFilledRectangle(0, 0, 700, 400, $settings);
/* 覆盖一些渐变区域 */
// $settings = ["StartR" => 194, "StartG" => 231, "StartB" => 44, "EndR" => 43, "EndG" => 107, "EndB" => 58, "Alpha" => 50];
// $image->drawGradientArea(0, 0, 700, 400, DIRECTION_VERTICAL, $settings);
// $image->drawGradientArea(0, 0, 700, 20, DIRECTION_VERTICAL, [
// "StartR" => 0,
// "StartG" => 0,
// "StartB" => 0,
// "EndR" => 50,
// "EndG" => 50,
// "EndB" => 50,
// "Alpha" => 100
// ]);
/* 绘制边界 */
// $image->drawRectangle(0, 0, 699, 229, ["R" => 0, "G" => 0, "B" => 0]);
/*写标题 */
// $image->setFontProperties(["FontName" => "Silkscreen.ttf", "FontSize" => 6]);
// $image->drawText(10, 13, "pRadar - Draw radar charts", ["R" => 255, "G" => 255,"B" => 255]);
/* 定义总图参数 */
$image->setFontProperties([
"FontName" => 'msyh.ttc',
"FontSize" => 10,
"R" => 0,
"G" => 0,
"B" => 0
]);
// $image->setShadow(true, ["X" => 2, "Y" => 2, "R" => 0, "G" => 0, "B" => 0, "Alpha" => 10]);
/* 创建雷达对象 */
$radarChart = new Radar();
/* 绘制第一雷达图 */
$image->setGraphArea(160, 5, 540, 325);
$Options = ["Layout" => RADAR_LAYOUT_STAR, "BackgroundGradient" => [
"StartR" => 255,
"StartG" => 255,
"StartB" => 255,
"StartAlpha" => 100,
"EndR" => 255,
"EndG" => 255,
"EndB" => 255,
"EndAlpha" => 100
],
'DrawAxisValues' => false,
'DrawPoints' => false,
'DrawPoly' => true,
'LabelPos' => RADAR_LABELS_HORIZONTAL,
'LabelsBGR' => 128,
'LabelsBGG' => 128,
'LabelsBGB' => 128,
];
$radarChart->drawRadar($image, $data, $Options);
// /* Draw the 2nd radar chart */
// $image->setGraphArea(350, 25, 690, 225);
// $Options = ["Layout" => RADAR_LAYOUT_CIRCLE, "LabelPos" => RADAR_LABELS_HORIZONTAL, "BackgroundGradient" => [
// "StartR" => 255,
// "StartG" => 255,
// "StartB" => 255,
// "StartAlpha" => 50,
// "EndR" => 32,
// "EndG" => 109,
// "EndB" => 174,
// "EndAlpha" => 30
// ]];
// $radarChart->drawRadar($image, $data, $Options);
/*写下传说 */
$image->setFontProperties(["FontName" => 'msyh.ttc', "FontSize" => 12]);
$image->drawLegend(240, 355, ["Style" => LEGEND_ROUND, "Mode" => LEGEND_HORIZONTAL, "Alpha" => 0, "FontR" => 128, "FontG" => 128, "FontB" => 128]);
/* 渲染图片 */
// $image->render(time().".png");
// 输出图像,不使用缓存
header("Content-Type: image/png");
$image->render(NULL); // 直接输出到浏览器
手绘还是没有js好用,能不能就不用吧,放心交给前端。