angular4-word-cloud-mouse-events
v1.1.2
Published
![ag-word-cloud](https://user-images.githubusercontent.com/4659608/30762233-d4a36136-9fe9-11e7-8788-831558cae077.png)
Downloads
1
Readme
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: [
AgWordCloudModule.forRoot()
]
Then add add the script to .angular-cli.json
"scripts": [
***
"../node_modules/angular4-word-cloud/d3.min.js"
]
How to use
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
};
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