OpenStack 绘制JS(D3)引用与模板

OpenStack 绘制JS(D3)与模板引用

以饼图绘制horizon.d3piechart.js为例看horizon如何引用JS的

首先，/usr/lib/python2.7/site-packages/horizon/templates/base.html

base.html引用了_scripts.html

再看_scripts.html，/usr/lib/python2.7/site-packages/horizon/templates/horizon/_scripts.html

_scripts.html中引用了horizon.d3piechart.js

那么模板中是怎么使用呢？

如

/usr/share/openstack-dashboard/openstack_dashboard/dashboards/admin/hypervisors/templates/hypervisors/index.html中

这样就出现了三个饼图

为什么？在horizon.d3piechart.js中horizon定义了horizon.d3_pie_chart_distribution

并且通过注册了函数d3_pie_chart_usage，同时经过_scripts.html中

使得函数生效。

ps: horizon模块为所有的js定义了全局变量horizon，当命名空间使用。

horizon.init检测到d3_pie_chart_usage之后，会

查找所有d3_pie_chart_usage这个class的DOM节点来使用函数创建饼图，图表的展示数据来源于h5自带的data标签