前端HTML使用D3.js展示图表

前端HTML使用D3.js展示图表


环境说明
D3.js  == v3,v4

样式代码

<iframe frameborder="0" scrolling="no" width="100%" height="100%" src="/Chart?style=Pie"></iframe>
外部样式可以自己定,但是src的链接一定要写好。正常情况是/Chart.html,但我这里是使用路由的方式。

在图表的html文件中,注意script需要引入d3.v4.min.jsd3.v3.min.js这两个文件。一般源码都会写清楚的。

<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//d3js.org/d3.v4.min.js"></script>

为了能够实现响应式布局,或者是跨设备间的布局兼容。

图表html文件中,需要调整高度和宽度。而外部使用图表文件的展示页面正常使用bootstrap布局就行了

这里贡献一下js代码,用来获取当前高度和宽度。
document.documentElement.clientWidth
document.documentElement.clientHeight

好了,以上就是D3.js在使用过程中,html页面使用方面出现的问题。
发布了99 篇原创文章 · 获赞 34 · 访问量 6万+

猜你喜欢

转载自blog.csdn.net/qq_42346414/article/details/104016688