PHP生成折线柱状混合图教程

编程并不是一个机械性的工作，而是需要有思考，有创新的工作，语法是固定的，但解决问题的思路则是依靠人的思维，这就需要我们坚持学习和更新自己的知识。今天golang学习网就整理分享《PHP绘制混合图表：折线加柱状图教程》，文章讲解的知识点主要包括，如果你对文章方面的知识点感兴趣，就不要错过golang学习网，在这可以对大家的知识积累有所帮助，助力开发能力的提升。

PHP无法直接绘制复杂图表，需由前端ECharts等库渲染；PHP仅负责输出JSON数据，ECharts支持折线+柱状混合图及双Y轴，配置需注意yAxisIndex和纯数字数据。

PHP 里没法直接画图，得靠前端图表库

PHP 本身没有内置绘图能力，imagecreate 等 GD 函数只能画原始位图，不支持自动坐标轴、图例、响应式缩放，更别说折线+柱状混合图这种复杂渲染。所谓“PHP 绘图”，实际是 PHP 负责准备数据，由前端 JavaScript 图表库（如 ECharts、Chart.js）渲染。混淆这点，容易在后端硬啃 SVG 或 Canvas，白费功夫。

ECharts 是最稳妥的混合图方案

ECharts 对「折线 + 柱状」组合图支持成熟，配置清晰，兼容性好，且 PHP 只需输出 JSON 数据即可。关键点在于：series 数组中不同 type 的系列共用同一 xAxis，但需注意 yAxisIndex 配置避免刻度冲突。

• 柱状图设 type: 'bar'，折线图设 type: 'line'
• 若两组数据量级差异大（如订单数 vs. 营收万元），必须启用双 Y 轴：yAxis: [{}, {}]，并在对应 series 中指定 yAxisIndex: 0 或 1
• PHP 输出时用 json_encode($data, JSON_UNESCAPED_UNICODE | JSON_NUMERIC_CHECK)，避免字符串数字被引号包裹导致 ECharts 解析为分类轴

// PHP 后端示例（返回给前端的 JSON 结构）
{
  "categories": ["1月", "2月", "3月"],
  "series": [
    { "name": "订单量", "type": "bar", "data": [120, 180, 90] },
    { "name": "营收(万元)", "type": "line", "yAxisIndex": 1, "data": [15.2, 23.8, 11.5] }
  ],
  "yAxis": [
    { "name": "订单量" },
    { "name": "营收(万元)", "scale": true }
  ]
}

别用 Chart.js 直接搞混合图——它默认不支持双 Y 轴叠加

Chart.js v3+ 虽能通过插件或自定义配置实现柱线混合，但原生 type: 'bar' 和 type: 'line' 共存时，若未显式配置 yAxes（v2）或 y 轴（v3），会强制共用同一数值轴，导致小数值被压扁、大数值看不清。很多教程漏掉这步，结果图看着“好像画出来了”，实则数据失真。

• v2 版本需在 options.scales.yAxes 中定义两个 yAxis，并在每个 dataset 里用 yAxisID 绑定
• v3 版本改用 axes 配置，且必须为 line 类型 dataset 显式设置 yAxisID: 'y1'
• PHP 端只需确保传过去的数据数组是纯数字，不要带单位字符串或空格

导出图片？用 ECharts 的 getConnectedDataURL() 或服务端快照

用户要“保存为 PNG”，不能让 PHP 用 GD 库去重绘一遍——样式、字体、抗锯齿全丢失。正确做法是：前端调用 ECharts 实例的 chart.getDataURL()（注意是 getDataURL，不是 getConnectedDataURL，后者已废弃），获取 base64 图片，再 POST 到 PHP 接口，由 PHP 用 file_put_contents 保存到服务器或直接输出下载头。

• POST 过来的 base64 字符串需先用 base64_decode(str_replace('data:image/png;base64,', '', $input)) 剥离前缀
• 注意 PHP memory_limit，大图可能触发超限，建议限制导出宽度 ≤1200px
• 若需服务端无头截图（如定时生成报表），用 Puppeteer 更可靠，而非强行在 PHP 里调用 wkhtmltopdf

ECharts 配置里 tooltip.trigger 设成 'axis' 才能让鼠标悬停时同时显示柱和线的数值，这个细节很多人漏掉，结果交互体验断层。

以上就是《PHP生成折线柱状混合图教程》的详细内容，更多关于的资料请关注golang学习网公众号！