<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基础折线图</title>
<style>::-webkit-scrollbar{display:none;}html,body{overflow:hidden;}</style>
</head>
<body>
<div style="width:600px; height:500px; margin: 0 auto;">
<canvas id="mountNode" width="600" height="400" ></canvas>
</div>
<script>
/*Fixing iframe window.innerHeight 0 issue in Safari*/
document.body.clientHeight;
</script>
<script src="f2.js"></script>
<script>
F2.Global.pixelRatio = window.devicePixelRatio;
const data = [
{ time: '2016-08-08 00:00:00', tem: 10 },
{ time: '2016-08-08 00:10:00', tem: 22 },
{ time: '2016-08-08 00:30:00', tem: 20 },
{ time: '2016-08-09 00:35:00', tem: 26 },
{ time: '2016-08-09 01:00:00', tem: 20 },
{ time: '2016-08-09 01:20:00', tem: 26 },
{ time: '2016-08-10 01:40:00', tem: 28 },
{ time: '2016-08-10 02:00:00', tem: 20 },
{ time: '2016-08-10 02:20:00', tem: 28 }
];

const chart = new F2.Chart({
id: 'mountNode'
});

const defs = {
time: {
type: 'timeCat',
mask: 'MM/DD',
tickCount: 3,
range: [ 0, 1 ]
},
tem: {
tickCount: 5,
min: 0
}
};
// 配置刻度文字大小，供PC端显示用(移动端可以使用默认值20px)
chart.axis('tem', {
label: {
fontSize: 14
}
});
chart.axis('time', {
label: {
fontSize: 14
}
});
chart.source(data, defs);
chart.line().position('time*tem');
chart.render();
</script>
</body>
</html>

canvas画布如何画图案例的更多相关文章

  1. HTML5入门十一---Canvas画布实现画图（二）

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  2. HTML5入门十---Canvas画布实现画图（一）

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  3. “canvas画布仿window系统自带画图软件"项目的思考

    "canvas画布仿window系统自带画图软件"项目的思考 首先贴上DEMO图,并没有美化效果.对UI有要求的,请自带补脑技术. 思考一 在做项目的过程中,我发现"工具 ...

  4. 微信小程序--canvas画布实现图片的编辑

    技术:微信小程序   概述 上传图片,编辑图片大小,添加文字,改变文字颜色等 详细 代码下载:http://www.demodashi.com/demo/14789.html 概述 微信小程序--ca ...

  5. canvas绘画基础(一)：认识canvas画布

    html5提供了一个<canvas>标签,结合javascript的canvas api接口可以用来绘制图形和动画.最近工作中涉及到画图的任务,下面来了解一下canvas的基础:canva ...

  6. h5开发中,利用微信或者QQ登陆以后获取用户头像在canvas画布显示问题

    在实际开发上先的h5页面产品中,总会遇到各种坑,好多坑都是安卓和iPhone端兼容的问题(用电脑谷歌浏览器输入  chrome://inspect/#devices可以用手机USB调试,打开) eg: ...

  7. [技术博客]海报图片生成——小程序canvas画布

    目录 背景介绍 canvas简介 代码实现 难点讲解 圆角矩形裁剪失败之PS的妙用 编码不要过硬 对过长的文字进行截取 真机首次生成时字体不对 drawImage只能使用本地图片 背景介绍 目标:利用 ...

  8. 11 canvas 画布 - 基础

    一.概述 canvas它和其它的HTML5标签的使用基本一致,但是它相当于在浏览器中建立一个画布,可以再这个画布上画图.创建动画甚至是3D游戏.由于canvas要适配不同终端的分辨率,所以尽可能的在标 ...

  9. html 5 canvas画布整理

    1. 创建canvas画布<canvas id="myCanvas" width="800" height="800" >< ...

随机推荐

  1. 地址栏输入url按回车发生了什么

    浏览器向DNS服务器(先查找缓存)查找输入URL对应的IP地址 DNS服务器返回对应的IP地址 浏览器根据IP地址与目标web服务器在80端口上建立TCP连接 浏览器获取请求页面的html代码 浏览器 ...

  2. PHP:自己写的mysql操作类

    a{ font-weight: bold; display: block; text-align: center; color: #5887bf; font-size: 22px; } .conten ...

  3. JAVA版本微信管家平台—JeeWx 捷微 4.1 微服务版本发布，微信砍价活动闪亮登场！

    捷微 4.1   微服务版本发布,微信砍价活动闪亮登场 ^_^ JEEWX 从4.0版本开始,技术架构全新换代更名 “捷微H5”.这是一款开源免费的微信运营平台,是jeewx的新一代产品,平台涵盖了: ...

  4. Nginx 安装学习笔记(1.安装和启动)

    centos7 编译安装和启动.停止https://www.cnblogs.com/xingyunblog/p/9072553.html 一.安装nginx 1.下载 wget http://ngin ...

  5. JAVA_04

    * a:局部代码块 * 在方法中出现:限定变量生命周期,及早释放,提高内存利用率 * b:构造代码块 (初始化块) * 在类中方法外出现:多个构造方法方法中相同的代码存放到一起,每次调用构造都执行,并 ...

  6. MySql：SELECT 语句（六） CONCAT() 函数的使用

    一.计算字段 为什么要用计算字段? 1)想要在一个字段中既显示公司地址,又显示公司名称,但是往往这两个都不在一个字段中 2)列数据是大小写混合的,但是报表程序需要把他们全部按大写形式展示出来 3)需要 ...

  7. 安装Python的numpy库

    1. 检查是否有pip.exe, 如果没有,可以到 https://pypi.org/project/pip/#files下载 2. 安装好pip后,在安装numpy之前,查看是否安装成功,pip - ...

  8. Python开发者年度调研，结果出乎意料！

    来源商业新知网,原标题:Python开发者年度调研:一半Python用户也用JS,2/3选择Linux系统 作为高级编程语言,Python的受欢迎程度近几年一直在往 上涨.每年,Python官方都会针 ...

  9. 区间修改区间求和cdq分治

    https://www.luogu.org/problemnew/show/P3372 #include<bits/stdc++.h> #define fi first #define s ...

  10. 阿里云 部署dashboard

    本文是基于kubeasz 进行部署安装,将部署心得记录下来.可以查看原文地址: https://github.com/gjmzj/kubeasz/blob/master/docs/guide/dash ...