html网页制作柱状图

制作柱状图的方法有很多种，其中一种比较简单的方法是使用HTML中的<canvas>标签和JavaScript来绘制柱状图。以下是一个简单的示例代码，你可以参考它来制作柱状图。

HTML代码：

<canvas id="myChart" width="400" height="300"></canvas>

JavaScript代码：

var canvas = document.getElementById("myChart");
var ctx = canvas.getContext("2d");
var data = [20, 30, 40, 50, 60]; // 柱状图的数据
var labels = ["A", "B", "C", "D", "E"]; // 柱状图的标签
var barWidth = 50; // 每个柱子的宽度
var barMargin = 10; // 每个柱子之间的间距
var maxValue = Math.max.apply(null, data); // 数据中的最大值

// 绘制坐标轴
ctx.beginPath();
ctx.moveTo(50, 250);
ctx.lineTo(350, 250);
ctx.moveTo(50, 250);
ctx.lineTo(50, 50);
ctx.stroke();

// 绘制柱状图
for (var i = 0; i < data.length; i++) {
  var x = 50 + (barWidth + barMargin) * i;
  var y = 250 - data[i] / maxValue * 200;
  var height = data[i] / maxValue * 200;
  
  ctx.fillStyle = "#4285F4";
  ctx.fillRect(x, y, barWidth, height);
  
  ctx.fillStyle = "#000000";
  ctx.fillText(labels[i], x + barWidth / 2, 270);
}

// 添加标题和说明
ctx.font = "bold 16px Arial";
ctx.fillText("柱状图", canvas.width / 2 - 40, 30);
ctx.font = "12px Arial";
ctx.fillText("数据来源：XXX公司", canvas.width - 120, canvas.height - 10);

该代码会在指定的<canvas>标签中绘制一个柱状图，其中data变量表示柱状图的数据，labels变量表示每个柱子的标签，barWidth和barMargin表示每个柱子的宽度和间距，maxValue表示数据中的最大值，用于计算每个柱子的高度。你可以根据自己的需求修改这些变量来绘制不同样式的柱状图。