angular4 实现 wordcloud

工具: webstorm   wordcloud2.js  angular2 or 4 

用其它的框架的请无视 mvvm框架可以参考

wordcloud2.js  GitHub 地址:

https://github.com/timdream/wordcloud2.js/tree/gh-pages/src

这儿不说如何新建一个angular4的project和它的语法等等

first

我们在assets文件下面放入wordcloud2.js

然后在index.html文件中加入script标签并且引用刚刚加入的js

在我们需要展示出来的component的模版中加入一个标签

接下来是重点

wordcloud是一款js插件 用jquery编写 目前并没有支持在angular上面的版本(找了很久谷歌)  angular是一款mvvm的框架 不建议操作dom 。为了功能只能妥协了

ng4 会把component内的script标签都会删除掉 ---  为啥请参考angular文档

所以我们不能在component加入固定的script标签

如上图标红的地方  js写法就是这样 但是在angular中是会报错的 。没有WordCloud的方法 。

so 。我们需要动态的加入script标签 。如上

document.create 创建一个script标签

定义它的类型 给innerhtml赋值

WordCloud  方法内 

参数1  加入这个div的位置

参数2  数据   是一个数组 。foo是tagname 80是size

最终实现:

ps:  请不要纠结定义的变量名  测试用途 随便取

ps2:  wordcloud . api地址

https://github.com/timdream/wordcloud2.js/blob/gh-pages/API.md