如何用JSON数据快速实现简单柱状图？（JS+PHP7环境）

嘿，我懂你想要的是加载快、不用啃复杂API的简单柱状图，毕竟那些第三方库虽然功能全，但有时候为了画个简单柱子要查半天文档，实在麻烦。刚好针对你的JS+PHP7环境，我给你整两个纯原生实现的方案，完全不用依赖任何外部库，代码直白好改～

第一步：PHP把数据传给前端 #

首先你需要把PHP里的myData转换成JS能直接用的格式，用json_encode就行，非常简单：

<?php
// 你的原始数据（补全剩下的条目就行）
$myData = [
    ["area" => "a33", "production" => 255],
    ["area" => "a31", "production" => 324],
    ["area" => "a29", "production" => 180], // 示例补充
    ["area" => "a35", "production" => 410]  // 示例补充
];
?>

<!-- 把PHP数据注入到JS变量中 -->
<script>
const chartData = <?php echo json_encode($myData); ?>;
</script>

方案一：纯DOM+CSS实现（最简单，零API学习成本） #

这个方案用div模拟柱子，完全不用碰canvas，代码一看就懂，改样式直接调CSS就行：

HTML结构 #

<!-- 柱状图容器 -->
<div class="bar-chart-container"></div>

CSS样式 #

.bar-chart-container {
    display: flex;
    align-items: flex-end;
    height: 300px; /* 图表总高度 */
    gap: 15px; /* 柱子之间的间距 */
    padding: 20px 30px;
    border-bottom: 1px solid #eee;
    margin: 20px 0;
}

.bar {
    flex: 1; /* 柱子宽度自动均分 */
    background-color: #2196F3;
    border-radius: 4px 4px 0 0;
    position: relative;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.bar:hover {
    background-color: #1976D2;
}

/* 产量数值标签 */
.bar-value {
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 12px;
    font-weight: 600;
    color: #333;
}

/* 区域名称标签 */
.bar-label {
    position: absolute;
    bottom: -25px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 12px;
    color: #666;
}

JS逻辑 #

// 获取容器元素
const chartContainer = document.querySelector('.bar-chart-container');
// 找到产量最大值，用来计算柱子高度比例
const maxProduction = Math.max(...chartData.map(item => item.production));
// 柱子的最大高度（和CSS里的容器高度对应）
const maxBarHeight = 250;

// 循环渲染每个柱子
chartData.forEach(item => {
    // 计算当前柱子的高度：(当前产量/最大产量)*最大柱子高度
    const barHeight = (item.production / maxProduction) * maxBarHeight;

    // 创建柱子元素
    const bar = document.createElement('div');
    bar.className = 'bar';
    bar.style.height = `${barHeight}px`;

    // 添加产量数值标签
    const valueLabel = document.createElement('div');
    valueLabel.className = 'bar-value';
    valueLabel.textContent = item.production;
    bar.appendChild(valueLabel);

    // 添加区域名称标签
    const areaLabel = document.createElement('div');
    areaLabel.className = 'bar-label';
    areaLabel.textContent = item.area;
    bar.appendChild(areaLabel);

    // 把柱子加到容器里
    chartContainer.appendChild(bar);
});

方案二：Canvas实现（更灵活，适合需要自定义绘制的场景） #

如果你想要更像“专业图表”的效果（比如加网格线、自定义动画），用canvas也很简单，原生API足够用，不用学复杂的库：

HTML结构 #

<canvas id="barChart" width="600" height="350"></canvas>

JS逻辑 #

const canvas = document.getElementById('barChart');
const ctx = canvas.getContext('2d');

// 图表基础参数
const chartWidth = canvas.width;
const chartHeight = canvas.height;
const padding = 40; // 四周留白
const barGap = 15; // 柱子间距
const barWidth = (chartWidth - padding * 2 - barGap * (chartData.length - 1)) / chartData.length;

// 找到产量最大值
const maxProduction = Math.max(...chartData.map(item => item.production));
// 计算高度比例：(图表可用高度)/最大值
const heightRatio = (chartHeight - padding * 2) / maxProduction;

// 绘制坐标轴
ctx.beginPath();
// 横轴
ctx.moveTo(padding, chartHeight - padding);
ctx.lineTo(chartWidth - padding, chartHeight - padding);
// 纵轴
ctx.moveTo(padding, padding);
ctx.lineTo(padding, chartHeight - padding);
ctx.strokeStyle = '#ddd';
ctx.stroke();

// 循环绘制每个柱子和标签
chartData.forEach((item, index) => {
    const x = padding + index * (barWidth + barGap);
    const y = chartHeight - padding - item.production * heightRatio;
    const barHeight = item.production * heightRatio;

    // 绘制柱子
    ctx.fillStyle = '#4CAF50';
    ctx.fillRect(x, y, barWidth, barHeight);

    // 绘制区域标签（横轴下方）
    ctx.fillStyle = '#333';
    ctx.font = '12px Arial';
    ctx.textAlign = 'center';
    ctx.fillText(item.area, x + barWidth/2, chartHeight - padding + 20);

    // 绘制产量标签（柱子上方）
    ctx.fillText(item.production, x + barWidth/2, y - 10);
});

为啥推荐这两个方案？ #

• 零依赖：完全不用引入任何JS库，加载速度拉满
• 易定制：样式和参数都能直接改，不用查第三方API文档
• 适配你的环境：PHP传数据的方式简单直接，和你的JS+PHP7完美兼容

内容的提问来源于stack exchange，提问作者Idle Man