在 angular6/7 中使用 Word Cloud 标签云

找了一圈，没有发现特别详细的关于在 angular6/7 中使用 Word Cloud 标签云的好的教程，然后花了点时间看了下官方文档，也不太详细，这里做下详细教程。

1、首先通过npm命令进行下载，运行这两个命令即可

npm install angular4-word-cloud --save
npm install d3 --save

2、在appmodule中引用该模块

import { AgWordCloudModule } from 'angular4-word-cloud';




// In your App's module:
imports: [
   AgWordCloudModule.forRoot()
]

3、在angular.json中添加script

"scripts": [
      ***
        "../node_modules/angular4-word-cloud/d3.min.js"
      ]

4、html中加入标签

5、ts中引入并添加相关参数

//our root app component
import {Component, NgModule, VERSION} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import {AgWordCloudModule, AgWordCloudData} from 'angular4-word-cloud';

@Component({
  selector: 'my-app',
  template: `
    

  `,
})
export class App {
   wordData: Array = [
        {size: 500, text: 'vitae'},
        {size: 301, text: 'amet'},
        {size: 123, text: 'sit'},
        {size: 321, text: 'eget'},
        {size: 231, text: 'quis'},
        {size: 123, text: 'sem'},
        {size: 346, text: 'massa'},
        {size: 107, text: 'nec'},
        {size: 436, text: 'sed'},
        {size: 731, text: 'semper'},
        {size: 80, text: 'scelerisque'},
        {size: 96, text: 'egestas'},
        {size: 531, text: 'libero'},
        {size: 109, text: 'nisl'},
        {size: 972, text: 'odio'},
        {size: 213, text: 'tincidunt'},
        {size: 294, text: 'vulputate'},
        {size: 472, text: 'venenatis'},
        {size: 297, text: 'malesuada'},
        {size: 456, text: 'finibus'},
        {size: 123, text: 'tempor'},
        {size: 376, text: 'tortor'},
        {size: 93, text: 'congue'},
        {size: 123, text: 'possit'},
    ];
    
  options = {
	  settings: {
  		minFontSize: 10,
	  	maxFontSize: 100,
	  },
	  margin: {
		  top: 10,
		  right: 10,
		  bottom: 10,
		  left: 10
	  },
	  labels: true // false to hide hover labels
  };
  constructor() {
   
  }
}

5、详细参数属性如下

Properties

• wordData (Array | WordCloudData[]) - set of words, it should be Array and each object must have a text and size;

• colors (?Array | string[]) - data colors, will use default and|or random colors if not specified.

• options (?WordCloudOptions) - word cloud options and there are two object you can pass it settings and margin.

  • setting containes minFontSize and maxFontSize for word sets.
  • margin of canves top, left, bottom, right, Default values is 10.
  • labels show Size label at the bottom

• width and height of canvas, the Default value for width is the width of the container, and the height equals the width * 0.75.

以上步骤来自于：https://www.npmjs.com/package/angular4-word-cloud -- angular4-word-cloud

详细样式参数等设置见：https://github.com/timdream/wordcloud2.js/blob/HEAD/API.md --wordcloud2.js API