canvas学习之折线图

Posted 2020-09-08

接着上一张柱状图讲,我们是使用折线图:

　　

import {canvasPoint} from ‘../../assets/js/canvas‘;
import {basicInfo,histogramMousemoveEvent} from ‘../../assets/js/lineChart‘;

//绘制图
function histogramCreate(width,point){
var canvas=document.getElementById(‘myCanvas‘);
if(!!width){
if(width > 758)
canvas.width = width;
}else{
var canvasWidth = document.getElementById(‘histogramPanel‘);
if(canvasWidth.offsetWidth > 758)
canvas.width = canvasWidth.offsetWidth;
}
addHistogramMousemove(canvas);
var ctx=canvas.getContext(‘2d‘);
ctx.clearRect(0,0,canvas.width,canvas.height);
//绘制折线图
basicInfo(ctx,[{num:2,name:"1"},
{num:10,name:"2"},
{num:15,name:"3"},
{num:40,name:"4"},
{num:20,name:"5"},
{num:60,name:"6"},
{num:10,name:"7"},
{num:30,name:"8"},
{num:23,name:"9"},
{num:45,name:"10"},
{num:56,name:"11"},
{num:89,name:"12"},
{num:23,name:"13"},
{num:45,name:"14"},
{num:63,name:"15"},
{num:73,name:"16"},
{num:83,name:"17"},
{num:23,name:"18"},
{num:35,name:"19"},
{num:56,name:"20"},
{num:12,name:"21"},
{num:2,name:"22"},
{num:1,name:"23"}],point);
}

 

注:默认折线图采用了贝塞尔曲线,我们可以关闭并改为直线,修改lineChart.js中的lineChartType变量即可