Angular4 Word Cloud
Links:
Installation
To install this library, run:
$ npm install angular4-word-cloud --save$ npm install d3 --save
API
Import
// In your App's module:imports:
Then add add the script to .angular-cli.json
"scripts":
How to use
There are one directive for word cloud: ag-word-cloud
, to use it just add this block on your html file:
// Create Work Cloud Data ArraywordData: Array<AgWordCloudData> = [// Words];// Word Cloud Optionsoptions = { settings: { minFontSize: 10, maxFontSize: 100, }, margin: { top: 10, right: 10, bottom: 10, left: 10 }, labels: true // false to hide hover labels};
Properties
-
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.
Troubleshooting
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!
License
MIT © Abdullah Alhazmy