H5 canvas学习 —案例(三)折线图
总体效果:
显然,我们要用面向对象的思维,画这个图
html部分:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#myCanvas{
border:1px solid #ccc;
}
</style>
</head>
<body>
<canvas id='myCanvas' width="700" height="500"></canvas>
<script src='index.js'></script>
<script>
new LineChart({
x:['10月','11月','12月','1月','2月','3月'],
y:[0,50,100,150,200,250,300],
yunit:"万元/m²",
line:[
{
"color":'red',da:[130,100,250,300