heatmapjs-vue

heatmapjs component for Vue.js.

CN 中文版

Built upon heatmap.js v2.0.5+ and depends on Vue.js v2.2.6+.

Features

• IE9+
• Support Typescript
• Auto resize

Documentation

• Demo
• 例子
• Example on JSBin

Install

NPM

Install the package.

$ npm install heatmapjs-vue

Register the component

import Vue from 'vue'
import heatmapjsVue from 'heatmapjs-vue'
Vue.use(heatmapjsVue)

You may now use the component in your markup

<style>
  .heatmapjs-container {
    width: 1000px;
    height: 500px;
  }
</style>
<heatmapjs-vue class="heatmapjs-container" :max="100" :min="0" :data="[{ x: 10, y: 15, value: 5}]"></heatmapjs-vue>

CDN

include vue 、heatmap.js、 heatmapjs-vue.js、heatmapjs-vue.css - I recommend using unpkg.

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/heatmapjs-vue.css"/>
<style>
  .heatmapjs-container {
    width: 1000px;
    height: 500px;
  }
</style>

<script src="https://unpkg.com/vue@latest"></script>
<script src="https://unpkg.com/[email protected]/build/heatmap.min.js"></script>
<!-- use the latest release -->
<script src="https://unpkg.com/heatmapjs-vue@latest"></script>
<!-- or point to a specific release -->
<script src="https://unpkg.com/[email protected]"></script>

You may now use the component in your markup

<heatmapjs-vue class="heatmapjs-container" :max="100" :min="0" :data="[{ x: 10, y: 15, value: 5}]"></heatmapjs-vue>

typescript

heatmapjs-vue-ts-example

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

MIT

Copyright (c) 2019-present, Qin Nian