vue-justgage

A Vue plugin of JustGage

中文文档

Reference and Thanks

justgage

Install

npm install --save vue-justgage

or use dist/vueJustgage.js without webpack

<script src="vue.min.js"></script>
<!-- must place this line after vue.js -->
<script src="dist/vueJustgage.js"></script>

Usage

You can import it in main.js

import vueJustgage from 'vue-justgage';
Vue.use(vueJustgage);

or import it in your own component.

<script>
import Vue from 'vue';
import vueJustgage from 'vue-justgage';
Vue.use(vueJustgage);
export default {
  ...
}
</script> 

Sample

Please use methods after mounted hook.

<template>
  <vue-justgage ref="g1" id="g1" class="gauge"></vue-justgage>
  <button type="button" id="gauge_refresh" @click="refresh">Refresh Gauges</button>
</template>
 
<script>
export default {
  data() {
    return {
      dflt: {
        min: 0,
        max: 200,
        donut: true,
        gaugeWidthScale: 0.6,
        counter: true,
        hideInnerShadow: true
      }
    }
  },
  mounted() {
    var g1 = this.$refs.g1.draw({
      id: 'g1',
      value: 125,
      title: 'javascript call',
      defaults: this.dflt
    });
  },
  methods: {
    refresh() {
      this.$refs.g1.refresh(this.getRandomInt(0, 100));
    }
  }
}
</script> 

Options

All options can be used as data-option:

<vue-justgage ref="g1" id="g1" class="gauge" data-value="100"></vue-justgage>

options about container

option	type	default	description
id	string		container element id
parentNode	node object	null	container element
width	int	null	gauge width
height	int	null	gauge height
defaults	bool	false	defaults parameter to use

options about gauge

option	type	default	description
value	float	0	value gauge is showing
gaugeWidthScale	float	1	width of the gauge element
gaugeColor	string	'#edebeb'	background color of gauge element
levelColors	string[]	[ "#a9d70b", "#f9c802", "#ff0000" ]	colors of indicator, from lower to upper, in RGB format
customSectors	[ ] of objects	[ ]	number of digits after floating point, available option:{color, lo, hi}
noGradient	bool	false	whether to use gradual color change for value, or sector-based
donut	bool	false	show full donut gauge
donutStartAngle	int	90	angle to start from when in donut mode
hideInnerShadow	bool	false	hide inner shadow
shadowOpacity	int	0.2	shadow opacity, values 0 ~ 1
shadowSize	int	5	inner shadow size
shadowVerticalOffset	int	3	how much shadow is offset from top
reverse	bool	false	reverse min and max
relativeGaugeSize	bool	false	whether gauge size should follow changes in container element size
pointer	bool	false	show value pointer
pointerOptions	object	[ ] of objects	define pointer look, available option:{toplength, bottomlength, bottomwidth, color, stroke, stroke_width, stroke_linecap}

options about text

option	type	default	description
title	string	' '	gauge title
min	float	0	min value
max	float	100	max value
hideMinMax	bool	false	hide min and max values
counter	bool	false	animate level number change
label	string	' '	text to show below value
decimals	int	0	number of digits after floating point
textRenderer	func	null	function applied before rendering text
titleFontColor	string	'#999999'	color of gauge title
titleFontFamily	string	'sans-serif'	font family of gauge title
titlePosition	string	'above'	position of gauge title,'above' or 'below'
valueFontColor	string	'#010101'	color of label showing current value
valueFontFamily	string	'Arial'	font family of label showing current value
symbol	string	' '	special symbol to show next to value
humanFriendly	string	false	font family of label showing current value
labelFontColor	string	'#b3b3b3'	color of label showing label under value
valueMinFontSize	int	16	absolute minimum font size for the value
titleMinFontSize	int	10	absolute minimum font size for the title
labelMinFontSize	int	10	absolute minimum font size for the label
minLabelMinFontSize	int	10	absolute minimum font size for the minimum label
maxLabelMinFontSize	int	10	absolute minimum font size for the maximum label
hideValue	bool	false	hide value text
humanFriendlyDecimal	int	0	number of decimal places for our human friendly number to contain
formatNumber	bool	false	formats numbers with commas where appropriate

options about animation

option	type	default	description
startAnimationTime	int	700	length of initial animation
startAnimationType	string	'>'	type of initial animation (linear, >, <, <>, bounce)
refreshAnimationTime	int	700	length of refresh animation
refreshAnimationType	string	'>'	type of refresh animation (linear, >, <, <>, bounce)

Methods

<vue-justgage ref="g1" id="g1" class="gauge"></vue-justgage>

• draw: new a JustGage instance

this.$refs.g1.draw(options)

• refresh:refresh gauge

this.$refs.g1.refresh(this.getRandomInt(0, 100));

PS: the method getRandomInt can be used directly as this.getRandomInt()

---

For detailed explanation on how things work, consult the docs for vue-justgage.