多语言展示
当前在线:1185今日阅读:75今日分享:44

用D3.js怎么创建饼图?

在数据可视化的开发中,饼图是非常常见的一种数据表达形式,而d3.js是很不错的数据可视化工具,用d3.js画一个饼图还是很方便的,不管是从图形上,效果上都不错,那么要怎么样画一个饼图呢?
工具/原料
1

d3.js

2

浏览器

方法/步骤
1

第一步,引入d3.js的库,也可以动人的引入,具体链接到网络搜一下就有了,引入格式如图:

2

第二步,引入d3.js的库后,就要动态的创建一个SVG对象,这个是用来绘制图形的,如图:

4

第四步,创建一个弧对象,及颜色,创建的方法还有其他参数,具体参考官方API文档,如图:

5

第五步,用创建的SVG对象开始绘制弧,注意参数不用写错了,如图:

6

第六步,给绘制的饼图添加文字,注意添加的位置,颜色等,如图:

7

第七步,到了这里就可以看看效果了,打开浏览器,如图:

8

最后,本实例是以d3.v4.js为准的,其他的请参考官方API文档

注意事项
1

引入路径不要写错

2

方法名不要错

推荐信息