html代码
<body>
<div id="container"></div>
</body>
js代码如下
<script src="../../day08-20181212/html/jrChart.js"></script>
<script>
var obj = {
id:"container",
width:500,
height:300,
data:[
{
name:"不及格",
num:4,
color:"red"
},
{
name:"及格",
num:13,
color:"orange"
},
{
name:"良好",
num:30,
color:"purple"
},
{
name:"优秀",
num:2,
color:"green"
},
{
name:"满分",
num:1,
color:"blue"
}
],
innerR:30,
outerR:80
};
drawPie2(obj);
</script>
引入名叫jrChart的js文件
function drawLineChart(obj) {
var id = obj.id;
var options = obj.options;
var width = obj.width;
var height = obj.height;
var startX = obj.startX;
var startY = obj.startY;
var labelCount = obj.labelCount;
var labelColor = obj.labelColor;
var nameSpace = obj.nameSpace;
var tip = obj.tip;
var line = obj.line;
var container = document.getElementById(id);
var canvas = document.createElement("canvas");
container.appendChild(canvas);
canvas.width = width || 1300;
canvas.height = height || 500;
var datas = obj.datas;
var color = obj.color;
var circleColor = obj.circleColor;
var name = obj.name;
var cvs = canvas.getContext("2d");
cvs.beginPath();
cvs.strokeStyle = "white";
var startY1 = 50;
cvs.moveTo(startX, startY1);
cvs.lineTo(startX, startY);
cvs.lineTo(1200, startY);
cvs.stroke();
var maxNum = 0;
var data = [].concat.apply([], options);//把二维数组变成一维数组
for (var m = 0; m < datas; m++) {
if (maxNum <= data[m]) {
maxNum = data[m];
}
}
maxNum = maxNum * 1.1;
var increment = (startY - startY1) / maxNum;
//y轴
var labelSpace = (startY - startY1) / labelCount;
for (var i = 0; i <= labelCount; i++) {
var text = Math.round((maxNum / labelCount) * i);
cvs.beginPath();
cvs.fillStyle = labelColor;
cvs.fillText(text, startX - 40, startY - (labelSpace * i ) );
cvs.closePath();
cvs.fill();
}
var start = 0;
var end = 0;
var titleSpace = 30;
for (var i = 0;i < line ;i++){
for (var j = 0;j < datas;j++){
end = datas * (i + 1);
start = i * datas;
// color[i] = obj.("color" + 'i');
//折线
cvs.beginPath();
cvs.strokeStyle = color[i];
cvs.moveTo(startX + nameSpace * (j + 1),(startY1 + (maxNum-(data.slice(start,end))[j]) * increment ));
cvs.lineTo(startX + nameSpace * (j + 2),(startY1 + (maxNum - (data.slice(start,end))[j + 1]) * increment));
cvs.stroke();
//圆点
cvs.beginPath();
cvs.fillStyle = circleColor;
cvs.arc(startX + nameSpace * (j + 1),(startY1 + (maxNum-(data.slice(start,end))[j]) * increment ),4,0,Math.PI * 2)
cvs.closePath();
cvs.fill();
}
//提示
cvs.beginPath();
cvs.strokeStyle = color[i];
cvs.moveTo(1050,40 + titleSpace * i);
cvs.lineTo(1100,40 + titleSpace * i);
cvs.stroke();
cvs.closePath();
cvs.beginPath();
cvs.fillStyle = color[i];
cvs.font = "15px 宋体";
cvs.fillText(name[i],1130,45 + titleSpace * i);
cvs.stroke();
cvs.closePath();
}
for(var i = 0; i < datas;i++){
cvs.beginPath();
cvs.fillStyle = labelColor;
cvs.fillText((i + 1) + "月份", startX + nameSpace * (i + 1) - 10, startY + 30 );
cvs.closePath();
cvs.fill();
}
cvs.beginPath();
cvs.fillStyle = labelColor;
cvs.fillText(tip,20,30);
cvs.closePath();
cvs.fill();
}