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

  

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变量即可

canvas学习之折线图的更多相关文章

  1. canvas图表(2) - 折线图

    原文地址:canvas图表(2) - 折线图 话说这天气一冷啊, 就患懒癌, 就不想码代码, 就想着在床上舒舒服服看视频. 那顺便就看blender视频, 学习下3D建模, 如果学会了建3D模型, 那 ...

  2. canvas绘制经典折线图(一)

    最终效果图如下: 实现步骤如下:注-引用了jQuery HTML代码 <!doctype html> <html lang="en"> <head&g ...

  3. jqPlot图表插件学习之折线图-散点图-series属性

    一.准备工作 首先我们需要到官网下载所需的文件: 官网下载(笔者选择的是jquery.jqplot.1.0.8r1250.zip这个版本) 然后读者需要根据自己的情况新建一个项目并且按照如下的方式加载 ...

  4. canvas制作柱形图/折线图/饼状图,Konva写动态饼状图

    制作饼状图 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  5. pyecharts v1 版本 学习笔记 折线图,面积图

    折线图 折线图 基本demo import pyecharts.options as opts from pyecharts.charts import Line c = ( Line() .add_ ...

  6. canvas+js绘制折线图

    效果: 源码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  7. 使用canvas来绘制折线图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. [canvas]利用canvas绘制自适应的折线图

    前段时间学习了用canvas绘制折现图,且当画布变换大小,折现图会随之变化,现附上代码 <!DOCTYPE html> <html lang="en"> & ...

  9. canvas图表详解系列(2):折线图

    本章建议学习时间4小时 学习方式:详细阅读,并手动实现相关代码(如果没有canvas基础,需要先学习前面的canvas基础笔记) 学习目标:此教程将教会大家如何使用canvas绘制各种图表,详细分解步 ...

随机推荐

  1. Oracle错误——ORA-12704:字符集不匹配

    错误 在查询使用coalesce把字符串进行转换时,报错ORA-12704:字符集不匹配 如下图 解决方法 在网上找了很多方法,有使用Translate转换的:有使用to_char()的,经过测试不符 ...

  2. Docker 入门指南——Dockerfile 指令

    COPY 复制文件 格式: COPY [--chown=<user>:<group>] <源路径>... <目标路径> 源路径可以是多个,甚至可以使通配 ...

  3. Linux配置ssh服务和XShell连接Linux

    SSH服务查看和安装,配置: https://www.cnblogs.com/qiuqiuqiu/p/6445426.html https://www.cnblogs.com/yunweis/p/77 ...

  4. (转)ResNet, AlexNet, VGG, Inception: Understanding various architectures of Convolutional Networks

    ResNet, AlexNet, VGG, Inception: Understanding various architectures of Convolutional Networks by KO ...

  5. Linux下使用wget下载FTP服务器文件

    wget -nH -m --ftp-user=your_username --ftp-password=your_password ftp://your_ftp_host/* 使用命令下载ftp上的文 ...

  6. Java String 函数常用操作 & format() 格式化输出,代码详解

    package _String_; import java.util.*; import java.math.*; import java.lang.*; public class _Strings ...

  7. PTA 7-3 jmu-ds-单链表的基本运算(15 分)

    jmu-ds-单链表的基本运算(15 分) 实现单链表的基本运算:初始化.插入.删除.求表的长度.判空.释放.(1)初始化单链表L,输出L->next的值:(2)依次采用尾插法插入元素:输入分两 ...

  8. 给大家讲个故事,感受一下什么叫CF。不知道的请认真听。

    我朋友是个温柔.体贴.负责.做事认真和口才流利的好男人 他在大一时喜欢上别系的女同学,像他这样的好人我以为这段恋情是手到擒来 但并没有,女方只把它当工具人,一当就当了四年 身为室友的我每天看著她为女方 ...

  9. Mysql视图、触发器、事务、储存过程、函数

    一.视图 什么是视图 视图是有一张表或多张表的查询结果构成的一张虚拟表 为什么使用视图 当我们在使用多表查询时 我们的sql语句可能会非常的复杂,如果每次都编写一遍sql'的话无疑是一件麻烦的事情,这 ...

  10. 4、lvs nat和dr类型演示

    实战操作 LVS-NAT  (应用场景:VIP是公网地址,DIP和RIP一般使用私网地址,NAT的主要目的是为了隐藏服务器) 核心要点: 1.DIP与各real server的RIP必须在同一个网段中 ...