Angular 2+的标签云模块 - angular-tag-cloud-module

Angular 2+的标签云模块 - angular-tag-cloud-module
插件名称 angular-tag-cloud-module
发布时间 2020年10月6日
插件作者 d-koppenhagen

Angular 2+应用程序的标签云组件。

安装:

# Yarn
yarn add angular-tag-cloud-module

# NPM
$ npm install angular-tag-cloud-module

使用:

将模块导入到Angular-NgModule中:

// app.module.ts
import { TagCloudModule } from 'angular-tag-cloud-module';

@NgModule({
  imports: [
    TagCloudModule
  ]
})
export class AppModule { }

设置云:

import { Component } from '@angular/core';
import { CloudData, CloudOptions } from 'angular-tag-cloud-module';

@Component({
  selector: 'my-component',
  template: `
    <div>
      <angular-tag-cloud
        [data]="data"
        [width]="options.width"
        [height]="options.height"
        [overflow]="options.overflow">
      </angular-tag-cloud>
    </div>
  `
})
export class AppComponent {
  options: CloudOptions = {
    // 如果宽度在0到1之间,它将被设置为上面元素的宽度乘以该值
    width: 1000,
    // 如果高度在0到1之间,它将被设置为上面元素的高度乘以该值
    height: 400,
    overflow: false,
  };

  data: CloudData[] = [
    {text: 'Weight-8-link-color', weight: 8, link: 'https://angular365.cn', color: '#ffaaee'},
    {text: 'Weight-10-link', weight: 10, link: 'https://angular365.cn', tooltip: 'display a tooltip'},
    // ...
  ];
}

您可以将配置属性传递为Input(如上例所示),也可以CloudOptions使用-Interface使用该config属性传递一个对象,如下所示。

<angular-tag-cloud [config]="options" [data]="data"></angular-tag-cloud>

您可以将以下HTML标签之一用于模板中的标签云:

<angular-tag-cloud ...></angular-tag-cloud>
<ng-tag-cloud ...></ng-tag-cloud>
<ngtc ...></ngtc>

请记住这一点,该weight属性定义了单词的相对重要性(例如出现的次数等)。值的范围是任意的,它们将线性映射为从1到10的离散比例。实际上,仅将一个单词传递给数组将具有相对于其他元素的效果。由于在这种情况下没有其他任何元素,因此结果是该元素成为具有类的容器w5-就在离散比例尺的中间。因此,for的给定值weight不会直接映射到CSS类。例如,您也可以使用类似12334-的值,它将始终相对于其他数组元素映射到从1到10的比例。如果您不希望标签云手动计算值,请设置strict属性true和使用整数值110了内weight财产。如果希望标签云为每个条目随机生成一个角度(未定义时),请将randomizeAngle属性设置为true。该step属性定义了要在计算过程中检查的下一个云元素要添加的步骤。计算从画布中间的某处开始。步长将增加给定值,如外部画布区域的螺旋形。当算法检测到当前元素有空间时,它将被添加到云中。step属性的值越小越精确,但在云创建过程中还需要更多时间和处理能力。