html js 扇形统计图_纯HTML5 Canvas实现的饼图

纯HTML5 Canvas实现的饼图

发布时间：2020-06-25 09:23:44

来源：51CTO

阅读：414

作者：gloomyfish

基本思路：

主要是利用HTML5 Canvas实现饼图绘制，绘制弧度的API主要是使用

context.arc与lineto两个API。

实现的功能有：

1. 支持标签Legend显示或者隐藏

2. 首次载入动画效果

3. 鼠标tooltip效果

4. 自定义饼图大小与是否添加文字

效果如下：

调用代码：

My Demo 1

Pie Chart Demo

Clear Plot Draw Plot

饼图JS的代码：

var pieChart = { width: 600, height: 400, series: [], unit: "kg", chartCanvas: null, selectable : true, title: "Pie Chart", legend : { enable : true }, edge : { width: 50, height: 50 }, animation: { enable: true, animCanvas : null, hh: 1, // tri