前端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.js或d3.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页面使用方面出现的问题。