Angular 4 云词标签指令

Angular 4 云词标签指令
插件名称 Angular4-word-cloud
发布时间 2020年8月6日
插件作者 alhazmy13

Angular 4+指令可为您的Web /移动应用程序动态呈现文字/标签云。基于d3.js的  数据可视化库。

安装:

$ npm install angular4-word-cloud –save

使用:

导入

// 在应用程序的模块中: 
imports: [
   AgWordCloudModule.forRoot()
]

然后添加添加脚本到 .angular-cli.json

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

有一个词云指令ag-word-cloud,要使用它,只需在HTML文件中添加以下代码块即可:

<div AgWordCloud 
	#word_cloud_chart=ag-word-cloud 
	[wordData]="word_cloud"
	 [options]="options">
	</div>
// 创建工作云数据数组 
wordData: Array<AgWordCloudData> = [// 单词];
// 文字云选项
options = {
	settings: {
		minFontSize: 10,
		maxFontSize: 100,
		textRotation: 0 // 参见下文
	},
	margin: {
		top: 10,
		right: 10,
		bottom: 10,
		left: 10
	},
	labels: true // false以隐藏悬停标签
};