heatmapjs-vue
heatmapjs component for Vue.js.
Built upon heatmap.js v2.0.5+ and depends on Vue.js v2.2.6+.
Features
- IE9+
- Support Typescript
- Auto resize
Documentation
Install
NPM
Install the package.
$ npm install heatmapjs-vue
Register the component
Vue
You may now use the component in your markup
CDN
include vue
、heatmap.js
、 heatmapjs-vue.js
、heatmapjs-vue.css
- I recommend using unpkg.
<!-- use the latest release --><!-- or point to a specific release -->
You may now use the component in your markup
typescript
Using the component
Props (all reactive)
-
options
(default:{}
)For further details, see heatmap.js' API documentation
-
min
(default:0
)the lower bound of your dataset
-
max
(default:100
)the upper bound of your dataset
-
data
(default:[]
)dataset
var dataPoint = { x: 5, // x coordinate of the datapoint, a number y: 5, // y coordinate of the datapoint, a number value: 100 // the value at datapoint(x, y) }; var data = [ dataPoint, dataPoint, dataPoint, dataPoint ]
-
clickDrawable
(default:false
)add a datapoint when click
-
moveDrawable
(default:false
)add a datapoint when mousemove or touchmove
-
drawValue
(default:1
)the value of datapoint when click or move
Methods
getValueAt
getData
getDataURL
repaint
For further details, see heatmap.js' API documentation
Events
-
change
triggered when data changes due to a click or move and the first parameter emit is the latest dataset
Local development
development
$ npm i$ npm run docs-dev
publish
$ npm install -g babel-cli$ npm i rollup -g$ chmod a+x scripts/build$ npm run release$ git push --follow-tags origin dev && npm publish
If you use the window system, you can't execute directly npm run release
, you need to install git bash software, and then use git bash to execute the command ./scripts/build
and npm run release:only
.
docs-publish
$ npm install -g gh-pages$ chmod a+x scripts/docs-publish$ npm run docs-publish
If you use the window system, you can't execute directly npm run docs-publish
, you need to install git bash software, and then use git bash to execute the command ./scripts/docs-publish
.
Donation
If you find it useful, you can buy us a cup of coffee.
License
Copyright (c) 2019-present, Qin Nian