To install this library, run:
$ npm install angular7-word-cloud --save
$ npm install d3 --save
// In your App's module:
imports: [
AgWordCloudModule.forRoot()
]
Then add add the script to .angular-cli.json
"scripts": [
***
"../node_modules/angular7-word-cloud/d3.min.js"
]
There are one directive for word cloud: ag-word-cloud
, to use it just add this block on your html file:
<div AgWordCloud
#word_cloud_chart=ag-word-cloud
[wordData]="word_cloud"
[options]="options">
</div>
// Create Work Cloud Data Array
wordData: Array<AgWordCloudData> = [// Words];
// Word Cloud Options
options = {
settings: {
minFontSize: 10,
maxFontSize: 100,
},
margin: {
top: 10,
right: 10,
bottom: 10,
left: 10
},
labels: true // false to hide hover labels
};
-
wordData
(Array<WordCloudData> | WordCloudData[]
) - set of words, it should beArray<WordCloudData>
and each object must have atext
andsize
; -
colors
(?Array<string> | 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 itsettings
andmargin
.-
setting
containesminFontSize
andmaxFontSize
for word sets. -
margin
of canvestop, left, bottom, right
, Default values is 10. -
labels
show Size label at the bottom
-
-
width
andheight
of canvas, the Default value for width is the width of the container, and the height equals the width * 0.75.
Please follow this guidelines when reporting bugs and feature requests:
- Use GitHub Issues board to report bugs and feature requests (not our email address)
- Please always write steps to reproduce the error. That way we can focus on fixing the bug, not scratching our heads trying to reproduce it.
Thanks for understanding!
MIT © [Raghvendra]