html5 手机端 折线图,html5 移动端折线图

document.addEventListener('plusready', function(){

//console.log("所有plus api都应该在此事件发生后调用，否则会出现plus is undefined。"

});

增益页面

#myCanvas{

width: 100%;

color: red;

}

window.οnlοad=function(){

//do something

let rawData= [{

"x": "0",

"y": "10",

"value": "315"

},

{

"x": "3",

"y": "4",

"value": "6498"

},

{

"x": "7",

"y": "3",

"value": "156"

},

{

"x": "5",

"y": "6",

"value": "123"

},

{

"x": "8",

"y": "8",

"value": "331"

},

{

"x": "7",

"y": "3",

"value": "123"

},

{

"x": "10",

"y": "2",

"value": "88"

}]

xInterval = 1;

yInterval = 1;

data =[];

for (let item of rawData) {

data.push({ x:item.x, y:item.y, value:item.value })

}

let canvas = document.getElementById('myCanvas');

// 1. 创建画布对象

let context = canvas.getContext("2d");

// 2. 获取画布的宽度和高度

const WIDTH = canvas.width;

const HEIGHT = canvas.height;

// 3. 定义坐标轴相对画布的内边距

var padding = 20;//初始化内边距

var paddingLeft = 60;//至少大于绘制文字的宽度

var paddingBottom = 30;//至少大于绘制文字的高度

// 4. 定义绘制坐标轴的关键点的坐标值

var axisYStart = {// y轴的起点坐标值

x: paddingLeft,

y: padding

};

var origin = {// 原点坐标值(x轴与y轴相交点)

x: paddingLeft,

y: HEIGHT - paddingBottom

};

var axisXStart = {// x轴的起点坐标值

x: WIDTH - padding,

y: HEIGHT - paddingBottom

};

// 5. 绘制坐标轴

context.beginPath();

context.moveTo(axisYStart.x, axisYStart.y);

context.lineTo(origin.x, origin.y);

context.lineTo(axisXStart.x, axisXStart.y);

context.stroke();

// 6. 绘制坐标轴的箭头

context.beginPath();

context.moveTo(axisYStart.x - 5, axisYStart.y + 10);

context.lineTo(axisYStart.x, axisYStart.y);

context.lineTo(axisYStart.x + 5, axisYStart.y + 10);

context.stroke();

context.beginPath();

context.moveTo(axisXStart.x - 10, axisXStart.y - 5);

context.lineTo(axisXStart.x, axisXStart.y);

context.lineTo(axisXStart.x - 10, axisXStart.y + 5);

context.stroke();

// 定义折点的x轴值

var pointsX = [];

// 7. 绘制坐标轴的刻度(x轴的月份和y轴的金额)

// x轴刻度

var month = {

x: paddingLeft,

y: HEIGHT - paddingBottom

}

//计算x轴刻度

data.sort(function (a, b) { return a.x - b.x });

let xIntervalCount = Math.ceil(data[data.length - 1].x / xInterval);

let xIntervalLen = (axisXStart.x - origin.x) / xIntervalCount;

// 设置字体

context.font = "16px 微软雅黑  #de0002";

context.fillStyle="red";

//context.color ="#de0002";

// 设置垂直对齐

context.textBaseline = "top";

//标注x坐标刻度

let xStart = origin.x + xIntervalLen;

let interval = this.xInterval;

for (let i = 1; i <= xIntervalCount; i++) {

context.fillText(interval, xStart, origin.y);

// 改变每次绘制的x坐标轴的值

xStart += xIntervalLen;

interval += this.xInterval;

// alert(interval);

}

//计算y轴刻度

this.data.sort(function (a, b) { return a.y - b.y });

let yIntervalCount = Math.ceil(this.data[this.data.length - 1].y / this.yInterval);

let yIntervalLen = (axisXStart.y - axisYStart.y) / yIntervalCount;

// 设置垂直对齐

context.textAlign = "right";

//标注y坐标刻度

let yStart = origin.y - xIntervalLen;

interval = this.yInterval;

for (let i = 1; i <= yIntervalCount; i++) {

context.fillText(interval, origin.x, yStart);

// 改变每次绘制的x坐标轴的值

yStart -= yIntervalLen;

interval += yInterval;

}

context.fillText("0,0", origin.x, origin.y);

context.stroke();

//8.绘制折线

this.data.sort(function (a, b) { return a.x - b.x });

context.textAlign ="left";

context.textBaseline = "bottom";

for(let i=0;i

let pointX=origin.x+this.data[i].x/this.xInterval*xIntervalLen;

let pointY=origin.y-this.data[i].y/this.yInterval*yIntervalLen;

if(i==0)

{

context.moveTo(pointX,pointY);

}

else{

context.lineTo(pointX,pointY);

}

context.fillText(this.data[i].value, pointX, pointY);

}

context.stroke();

}