html5 绘制圆饼图,HTML5 Canvas(实战:绘制饼图)

2023-10-09 23:30

本文主要是介绍html5 绘制圆饼图,HTML5 Canvas(实战:绘制饼图),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

有了canvas以后,咱们能够很容易地建立一个简单图标,不须要任何插件,不过,有的小伙伴以为它很难,笔者仔细思考一番以后,只能吐嘈一下他们的绘图技能...

因而在开始绘制以前,咱们首先画一下草图~

1460000014841309git

Make It Reusable

为了建立一个能够重用,而且能够灵活地重用的饼图,笔者决定最终的建立饼图方法接收两个参数,分别是要显示的数据data,绘制参数options面试

Data

Data From Server

在实际应用场景中,咱们从后端拿到的每每是诸如几个年份的产量一类的数据,好比(这里,咱们为了简化代码,将颜色也放到了后台返回的数据中):canvas

var data = [

{

data: 10,

color: "red",

label: "2016"

},

{

data: 15,

color: "grey",

label: "2017"

},

{

data: 15,

color: "black",

label: "2018"

}

];

To Process Data

而绘制饼图时, 咱们须要根据比例"分饼", 而且在某些地方显示出实际的数据(好比tooltip),所以咱们须要一个以下的数据处理函数:后端

function calculateData(data) {

if(data instanceof Array) {

var sum = data.reduce(function(a, b) {

return a + b.data;

}, 0);

var map = data.map(function(a) {

return {

label: a.label,

data: a.data,

color: a.color,

portion: a.data/sum

}

});

return map;

}

}

Options

另外,即便咱们能够根据不一样的数据绘制不一样的图表,恐怕也只能知足个别需求,毕竟每一个人的喜爱都不同,咱们须要建立一个能够显示不一样数据,又能够拥有不一样排版、不一样布局的图表,实现上述目标,咱们须要以下参数列表:函数

var options = {

legend: {

font: {

size: 18,

family: 'Arial',

weight: 'bold'

}

},

title: {

text: 'Pie Chart',

font: {

size: 18,

family: 'Arial',

weight: 'bold'

}

},

tooltip: {

template: '

Year: {{label}}
Production: {{data}}
',

font: {

size: 18,

family: 'Arial',

weight: 'bold'

}

}

}

Canvas

咱们的工具函数不该该能够提早知道用户想要用来绘制图表的canvas,用户可能想在页面中的多个canvas上绘制图表,所以工具函数应该能够接受一个参数,用来肯定绘制图表的canvas,不少开源库都使用id做为识别canvas的标识,笔者认为接收element更好一些,由于不是全部的用户都愿意给canvas添加ID属性, 有的时候,用户想给拥有某一个class属性的全部canvas批量绘图,并根据它们的dataset属性动态的生成数据。

综上,最后咱们的工具函数应该长成下面这个样子:工具

function drawPie(canvas, data, option) {

// To Do

}

Start Coding

Get Context

首先获取绘图上下文,仍要注意先判断是否存在getContext()方法。布局

var canvas = document.getElementById("canvas");

if(canvas.getContext) {

var ctx = canvas.getContext("2d");

}

Generate Options

而后,咱们须要将自定义的参数和默认参数合并在一块儿,组成一个新的完整的参数列表,原则就是没有自定义的都采用默认值。字体

function mergeJSON(source1,source2){

var mergedJSON = JSON.parse(JSON.stringify(source2));

for (var attrname in source1) {

if(mergedJSON.hasOwnProperty(attrname)) {

if ( source1[attrname]!=null && source1[attrname].constructor==Object ) {

mergedJSON[attrname] = mergeJSON(source1[attrname], mergedJSON[attrname]);

}

} else {

mergedJSON[attrname] = source1[attrname];

}

}

return mergedJSON;

}

function generateOptions(givenOptions, defaultOptions) {

return mergeJSON(defaultOptions, givenOptions);

}

Draw Title

把标题绘制在画布顶部的中间,距离页面顶部留有20像素的空隙,而且根据参数,绘制具备特定内容和样式的标题。spa

var width = canvas.width,

height = canvas.height,

op = generateOptions(options, defaultOptions),

title_text = op.title.text,

title_position = {};

ctx.font = op.title.font.weight + " " + op.title.font.size+"px " + op.title.font.family;

title_position .x = (width - title_width)/2;

title_position.y = 20 + op.title.font.size;

title_width = ctx.measureText(title_text).width, title_height = op.title.font.size;

ctx.fillText(title_text, title_position.x, title_position.y);

Radius & Center

笔者决定使饼图距离标题有30像素的空隙,距离左边框和底部分别留有20像素的空隙,所以它的半径和圆心分别是:

var radius = (height - title_height - title_position.y - 20) / 2 ;

var center = {

x: radius + 20,

y: radius + 30 + title_position.y

};

Legend

图例的高设置为图例字体大小的1.2倍,宽设置为图例字体大小的2.5倍,距离饼图40像素的间隙,第一个图例顶部距离页面顶端80像素,文字距离图例5像素,垂直居中,因而图例的大致信息总结以下:

var legend_width = op.legend.font.size * 2.5,

legend_height = op.legend.font.size * 1.2,

legend_posX = center.x * 2 +20,

legend_posY = 80,

legend_textX = legend_posX + legend_width + 5,

legend_textY = legend_posY + op.legend.font.size * 0.9;

Draw Pie & Legends

Border

先给图表加一个边框

ctx.strokeStyle = 'grey';

ctx.lineWidth = 3;

ctx.strokeRect(0, 0, canvas.width, canvas.height);

Pie & Legends

遍历数据绘图。

var data_c = calculateData(data);

var startAngle = 0, endAngle = 0;

for(var i=0, len=data.length; i

endAngle += data_c[i].portion * 2*Math.PI;

ctx.fillStyle = data_c[i].color;

ctx.beginPath();

ctx.moveTo(center.x, center.y);

ctx.arc(center.x, center.y, radius, startAngle, endAngle, false);

ctx.closePath();

ctx.fill();

startAngle = endAngle;

ctx.fillRect(legend_posX, legend_posY + (10 + legend_height) * i, legend_width, legend_height);

ctx.font = 'bold 12px Arial';

var percent = data_c[i].label + ' : ' + (data_c[i].portion*100).toFixed(2) + '%';

ctx.fillText(percent, legend_textX, legend_textY + (10 + legend_height) * i);

}

Let's try it!

咱们的工具函数已经作到一半啦,能够画出一个带有图例的饼图,而且标题和图例文字大小 粗细 字体都可配置,下面试一下灵不灵~

var init = function(){

var data = [

{

data: 10,

color: "red",

label: "2016"

},

{

data: 15,

color: "grey",

label: "2017"

},

{

data: 15,

color: "black",

label: "2018"

}

];

var options = {

title: {

text: 'Production By Year',

font: {

size: 30

}

}

}

drawCircle(data, document.getElementById("drawing"), options);

};

init();

画出来的饼图长这个样子~

1460000014841310

下一篇笔者会加上Tooltip的绘制哦,那部分比较复杂,默默地给本身加油~

这篇关于html5 绘制圆饼图,HTML5 Canvas(实战:绘制饼图)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/176326

相关文章

HTML5中的Microdata与历史记录管理详解

《HTML5中的Microdata与历史记录管理详解》Microdata作为HTML5新增的一个特性,它允许开发者在HTML文档中添加更多的语义信息,以便于搜索引擎和浏览器更好地理解页面内容,本文将探... 目录html5中的Mijscrodata与历史记录管理背景简介html5中的Microdata使用M

html5的响应式布局的方法示例详解

《html5的响应式布局的方法示例详解》:本文主要介绍了HTML5中使用媒体查询和Flexbox进行响应式布局的方法,简要介绍了CSSGrid布局的基础知识和如何实现自动换行的网格布局,详细内容请阅读本文,希望能对你有所帮助... 一 使用媒体查询响应式布局        使用的参数@media这是常用的

HTML5表格语法格式详解

《HTML5表格语法格式详解》在HTML语法中,表格主要通过table、tr和td3个标签构成,本文通过实例代码讲解HTML5表格语法格式,感兴趣的朋友一起看看吧... 目录一、表格1.表格语法格式2.表格属性 3.例子二、不规则表格1.跨行2.跨列3.例子一、表格在html语法中,表格主要通过< tab

Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案

《Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案》:本文主要介绍Vue3组件中getCurrentInstance()获取App实例,但是返回nu... 目录vue3组件中getCurrentInstajavascriptnce()获取App实例,但是返回n

Python列表去重的4种核心方法与实战指南详解

《Python列表去重的4种核心方法与实战指南详解》在Python开发中,处理列表数据时经常需要去除重复元素,本文将详细介绍4种最实用的列表去重方法,有需要的小伙伴可以根据自己的需要进行选择... 目录方法1:集合(set)去重法(最快速)方法2:顺序遍历法(保持顺序)方法3:副本删除法(原地修改)方法4:

在Spring Boot中浅尝内存泄漏的实战记录

《在SpringBoot中浅尝内存泄漏的实战记录》本文给大家分享在SpringBoot中浅尝内存泄漏的实战记录,结合实例代码给大家介绍的非常详细,感兴趣的朋友一起看看吧... 目录使用静态集合持有对象引用,阻止GC回收关键点:可执行代码:验证:1,运行程序(启动时添加JVM参数限制堆大小):2,访问 htt

JS+HTML实现在线图片水印添加工具

《JS+HTML实现在线图片水印添加工具》在社交媒体和内容创作日益频繁的今天,如何保护原创内容、展示品牌身份成了一个不得不面对的问题,本文将实现一个完全基于HTML+CSS构建的现代化图片水印在线工具... 目录概述功能亮点使用方法技术解析延伸思考运行效果项目源码下载总结概述在社交媒体和内容创作日益频繁的

前端CSS Grid 布局示例详解

《前端CSSGrid布局示例详解》CSSGrid是一种二维布局系统,可以同时控制行和列,相比Flex(一维布局),更适合用在整体页面布局或复杂模块结构中,:本文主要介绍前端CSSGri... 目录css Grid 布局详解(通俗易懂版)一、概述二、基础概念三、创建 Grid 容器四、定义网格行和列五、设置行

前端下载文件时如何后端返回的文件流一些常见方法

《前端下载文件时如何后端返回的文件流一些常见方法》:本文主要介绍前端下载文件时如何后端返回的文件流一些常见方法,包括使用Blob和URL.createObjectURL创建下载链接,以及处理带有C... 目录1. 使用 Blob 和 URL.createObjectURL 创建下载链接例子:使用 Blob

Vuex Actions多参数传递的解决方案

《VuexActions多参数传递的解决方案》在Vuex中,actions的设计默认只支持单个参数传递,这有时会限制我们的使用场景,下面我将详细介绍几种处理多参数传递的解决方案,从基础到高级,... 目录一、对象封装法(推荐)二、参数解构法三、柯里化函数法四、Payload 工厂函数五、TypeScript