html语言制作折线图,html5绘制折线图
html5绘制折线图详细代码
(function (){
window.addEventListener("load", function(){
var data = [100,-1000,0,700];
// 获取上下文
var a_canvas = document.getElementById('a_canvas');
var context = a_canvas.getContext("2d");
// 绘制背景
var gradient = context.createLinearGradient(0,0,0,300);
// gradient.addColorStop(0,"#e0e0e0");
//gradient.addColorStop(1,"#ffffff");
context.fillStyle = gradient;
context.fillRect(0,0,a_canvas.width,a_canvas.height);
// 描绘边框
var grid_cols = data.length + 1;
var grid_rows = 4;
var cell_height = a_canvas.height / grid_rows;
var cell_width = a_canvas.width / grid_cols;
context.lineWidth = 1;
context.strokeStyle = "#a0a0a0";
// 结束边框描绘
context.beginPath();
// 准备画横线
/*for (var col = 0; col <= grid_cols; col++) {
var x = col * cell_width;
context.moveTo(x,0);
context.lineTo(x,a_canvas.height);
}
// 准备画竖线
for(var row = 0; row <= grid_rows; row++){
var y = row * cell_height;
context.moveTo(0,y);
context.lineTo(a_canvas.width, y);
}*/
//划横线
context.moveTo(0,a_canvas.height/2);
context.lineTo(a_canvas.width,a_canvas.height/2);
//画竖线
context.moveTo(0,0);
context.lineTo(0,a_canvas.height);
context.lineWidth = 1;
context.strokeStyle = "#c0c0c0";
context.stroke();
var max_v =0;
for(var i = 0; i
var d=0;
if(data[i]<0)
{d=d-data[i];
}
else{d=data[i];};
if (d > max_v) { max_v =d};
}
max_v = max_v * 1.1;
// 将数据换算为坐标
var points = [];
for( var i=0; i < data.length; i++){
var v= data[i];
var px = cell_width * (i +1);
var py = a_canvas.height/2 - a_canvas.height*(v / max_v)/2;
points.push({"x":px,"y":py});
}
// 绘制折现
context.beginPath();
context.moveTo(points[0].x, points[0].y);
for(var i= 1; i< points.length; i++){
context.lineTo(points[i].x,points[i].y);
}
context.lineWidth = 2;
context.strokeStyle = "#8BA9FF";
context.stroke();
//绘制坐标图形
for(var i in points){
var p = points[i];
context.beginPath();
context.arc(p.x,p.y,4,0,2*Math.PI);
//实心圆
/*
context.fillStyle = "#000";*/
//空心圆
context.strokeStyle = "#000";
context.stroke();
context.fillStyle="white";
context.fill();
}
//添加文字
for(var i in points)
{ var p = points[i];
context.beginPath();
context.fillStyle="black";
context.fillText(data[i], p.x + 1, p.y - 15);
}
},false);
})();
运行结果如下:
html语言制作折线图,html5绘制折线图相关推荐
- r语言怎么以第二列绘制线图_用卫星图像绘制世界海岸线图-第二部分
r语言怎么以第二列绘制线图 Part I of this blog series is here. 本博客系列的第一部分 在这里 . At the UKHO we are interested in ...
- 运用R语言(ggplot2包)绘制箱式图
运用R语言(ggplot2包)绘制箱式图 目录 运用R语言(ggplot2包)绘制箱式图 一.箱式图 1. 概念 2. 箱式图的特征<
- 利用思维导图软件绘制鱼骨图怎样做
思维导图的类型有哪些? 圆圈图 主要用于把一个主题展开来,联想或描述细节.小圈圈是主题,而外面的大圈圈里放的是和这个主题有关的细节或特征 气泡图 由很多泡泡组成,中间一个主题泡泡描述核心主题,周围的属 ...
- r语言做绘制精美pcoa图_R语言统计与绘图:绘制QQ图
QQ图一般用来比较两组数字的分布,比如两个变量或两个向量. 在国外,顾客习惯性会给服用人员小费,给多少小费是一个经常被讨论的话题,今天使用的数据集为reshape2包的tips数据集,用来演示QQ图的 ...
- r语言中which的使用_R语言绘图 | 使用pheatmap快速绘制热图
欢迎关注微信公众号"生信小王子"! 热图是我们展示数据时常用的图形,今天小编教大家使用"pheatmap" 快速绘制热图. 首先,我们需要准备输入文件.比如,我 ...
- python制作日历_Python如何绘制日历图和热力图
本文以2019年全国各城市的空气质量观测数据为例,利用matplotlib.calmap.pyecharts绘制日历图和热力图.在绘图之前先利用pandas对空气质量数据进行处理. 数据处理 从网站下 ...
- R语言:使用ComplexHeatmap包绘制热图
ComplexHeatmap包由顾祖光博士创建,用于绘制美观的热图,用颜色表示数据的聚合程度,相对美观. 使用手册见GitHub链接: https://jokergoo.github.io/Compl ...
- R语言中如何利用ggplot2绘制qq图和boxplot图
文章目录 绘制qq图 函数介绍 geom_qq() 参数介绍 注意事项 例子 Using to explore the distribution of a variable 绘制boxplot 函数介 ...
- html5绘制八卦图,用cad画八卦图的方法步骤详解
今天在家研究了很久CAD,AUTOCAD中如何制作八卦图形?其实方法很简单的.那么下面小编给大家整理了关于用cad画八卦图的方法,希望大家喜欢. 用cad画八卦图的方法步骤 1首先打开CAD,OP空格 ...
- 棒棒糖也能画成图—— ggplot2绘制棒棒糖图/哑铃图
欢迎关注公众号查看原文 Part 1 :棒棒糖图 棒棒糖图因其形状和棒棒糖相似而得名,具体来看实际上是一个散点和一条线段的组合.棒棒糖图是散点图的一种变体,又与柱状图非常相似,但其在清晰展示数据的同时 ...
最新文章
- excel实现统计词频功能
- (原創) 如何讓Linux開機時,不要在圖形介面顯示開機訊息? (OS) (Linux) (CentOS)
- NYOJ 714 Card Trick
- nginx做服务器入口_Nginx实现http反向代理
- 将html代码转换为dom,将HTML字符转换为DOM节点并动态添加到文档中
- Kylin 2.0升级总结
- ejb 属于哪一层,作用是什么,什么时候用
- Python按元组中第一个字符串升序第二个字符串降序排序
- python find函数_Python 装饰器填坑指南 | 最常见的报错信息、原因和解决方案
- 云知声原创技术再获肯定:多篇论文被国际语音顶会 INTERSPEECH 2020 收录
- 学习笔记:CentOS7学习之十八:Linux系统启动原理及故障排除
- Python3.4下使用sqlalchemy
- 读Thinking in Java(1~4)
- ABB机器人仿真软件RobotSdutio 安装使用常见部分问题集
- 你可以有喜欢和善用的语言,但千万不要和她Bind
- 最燃黑客情报官薛锋:端起AK伏特加,代表人民把坏人抓
- 应届生落北京集体户口
- 香浓熵(Shannon)与冯诺伊曼熵(Von Neumann)
- Java双重检查懒汉式单例模式中volatile的作用
- 计算机一级汉字录入在线联系,计算机一级考试指导:汉字录入题的操作(3)