<!DOCTYPE html>
<html lang="en">
<canvas id="canvas1" width="1000" height="300"></canvas>
<script>
(function () {
window.addEventListener("load", func1(),func2(), false);
})();
function func1() {
var data = [21.2, 22.3, 23.1, 9.4, 20.0, 19.8, 19.9];
var lateral = ["星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日"];
//获取上下文
var canvas = document.getElementById("canvas1");
var context = canvas.getContext("2d");
//绘制背景
var gradient = context.createLinearGradient(0, 0, 0, 300);
context.fillStyle = gradient;
context.fillRect(0, 0, canvas.width, canvas.height);
var real_height = canvas.height-15;
var real_width = canvas.width-40;
//描绘边框
var grid_cols = data.length+1;
var cell_width = real_width/grid_cols;
context.lineWidth = 1;
context.strokeStyle = "#a0a0a0";
// 结束边框描绘
context.beginPath();
//画横线
context.moveTo(0,real_height); //起点
context.lineTo(real_width,real_height); //终点
context.lineWidth = 2;
context.strokeStyle = "black";
context.stroke();
//画竖线
context.moveTo(0,20); //起点
context.lineTo(0,real_height); //终点
context.lineWidth = 2;
context.strokeStyle = "black";
context.stroke();
//找出最大值
var max_v =0;
for(var i = 0; i<data.length; i++){
if (data[i] > max_v) {
max_v =data[i]
};
}
max_v = max_v * 1.1;
// 将数据换算为坐标
var points = [];
for( var i=0; i < data.length; i++){
var v= data[i];
var px = cell_width * (i +1);
var py = real_height - real_height*(v / max_v);
points.push({"x":px,"y":py});
}
//绘制坐标图形
for(var i in points){
var p = points[i];
context.beginPath();
if(data[i]<10){ //低于10为黄色
context.fillStyle="#FFD306";
}else{
context.fillStyle="blue";
}
context.fillRect(p.x,p.y,15,real_height-p.y);
context.fill();
}
//添加文字
for(var i in points)
{
context.fillStyle="black";
var p = points[i];
context.fillText(data[i], p.x, p.y - 5);
context.fillText(lateral[i],p.x + 1,real_height+12);
}
context.fillText('星期',real_width,real_height+12);
context.fillText('气温',0,10);
}
function func2() {
var canvas = document.getElementById("canvas1");
var context = canvas.getContext("2d");
context.fillText('html5柱状图示例',500,10);
}
</script>
</html>
参考:https://www.cnblogs.com/shuniuniu/p/5318666.html