| Name | Type | Default |
|---|
|
animationDuration
|
Number
|
null
|
Sets ot gets the bulletcharts's animationDuration.
Possible values
number
'slow'
'fast'
<template>
<JqxBulletChart ref="myBulletChart"
:width="500" :height="120" :animationDuration="500"
/>
</template>
<script>
import JqxBulletChart from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbulletchart.vue';
export default {
components: {
JqxBulletChart
}
}
</script>
Get the animationDuration property. let animationDuration = this.$refs.myBulletChart.animationDuration;
|
|
barSize
|
String | Number
|
50%
|
Sets ot gets the bulletcharts's bar size.
<template>
<JqxBulletChart ref="myBulletChart"
:width="500" :height="120" :barSize="'40%'"
/>
</template>
<script>
import JqxBulletChart from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbulletchart.vue';
export default {
components: {
JqxBulletChart
}
}
</script>
|
|
description
|
String
|
'Description'
|
Sets ot gets the bulletcharts's description.
<template>
<JqxBulletChart ref="myBulletChart"
:width="500" :height="120" :description="'Description'"
/>
</template>
<script>
import JqxBulletChart from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbulletchart.vue';
export default {
components: {
JqxBulletChart
}
}
</script>
|
|
disabled
|
Boolean
|
false
|
Disables the bullet chart.
<template>
<JqxBulletChart ref="myBulletChart"
:width="500" :height="120" :disabled="true"
/>
</template>
<script>
import JqxBulletChart from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbulletchart.vue';
export default {
components: {
JqxBulletChart
}
}
</script>
|
|
height
|
Number | String
|
100
|
Sets ot gets the bulletcharts's height.
<template>
<JqxBulletChart ref="myBulletChart"
:width="500" :height="120"
/>
</template>
<script>
import JqxBulletChart from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbulletchart.vue';
export default {
components: {
JqxBulletChart
}
}
</script>
|
|
labelsFormat
|
String
|
null
|
Sets ot gets the bulletcharts's labelsFormat.
Possible values:
"null"
"d" - decimal numbers
"f" - floating-point numbers
"n" - integer numbers
"c" - currency numbers
"p" - percentage numbers
<template>
<JqxBulletChart ref="myBulletChart"
:width="500" :height="120" :labelsFormat="'c'"
/>
</template>
<script>
import JqxBulletChart from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbulletchart.vue';
export default {
components: {
JqxBulletChart
}
}
</script>
|
|
labelsFormatFunction
|
Function
|
null
|
Sets ot gets the bulletcharts's labelsFormatFunction.
<template>
<JqxBulletChart ref="myBulletChart"
:width="500" :height="120" :labelsFormatFunction="labelsFormatFunction"
/>
</template>
<script>
import JqxBulletChart from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbulletchart.vue';
export default {
components: {
JqxBulletChart
},
methods: {
labelsFormatFunction: function (value, position) {
return value + 'C'
}
}
}
</script>
|
|
orientation
|
String
|
"horizontal"
|
Sets ot gets the bulletcharts's orientation.
Possible values:
"horizontal"
"vertical"
<template>
<JqxBulletChart ref="myBulletChart"
:width="500" :height="120" :orientation="'horizontal'"
/>
</template>
<script>
import JqxBulletChart from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbulletchart.vue';
export default {
components: {
JqxBulletChart
}
}
</script>
|
|
pointer
|
Object
|
{ value: 65, label: "Value", size: "25%", color: "" }
|
Sets ot gets the bulletcharts's pointer.
<template>
<JqxBulletChart ref="myBulletChart"
:width="500" :height="120" :pointer="pointer"
/>
</template>
<script>
import JqxBulletChart from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbulletchart.vue';
export default {
components: {
JqxBulletChart
},
data: function () {
return {
pointer: {
value: 270,
label: 'Value',
thickness: 8,
color: 'White'
}
}
}
}
</script>
|
|
rtl
|
Boolean
|
false
|
Sets or gets a value indicating whether widget's elements are aligned to support locales using right-to-left fonts.
<template>
<JqxBulletChart ref="myBulletChart"
:width="500" :height="120" :rtl="true"
/>
</template>
<script>
import JqxBulletChart from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbulletchart.vue';
export default {
components: {
JqxBulletChart
}
}
</script>
|
|
ranges
|
Array
|
[{ startValue: 0, endValue: 50, color: "#000000", opacity: 0.7 }, { startValue: 50, endValue: 80, color: "#000000", opacity: 0.5 }, { startValue: 80, endValue: 100, color: "#000000", opacity: 0.3}]
|
Sets ot gets the bulletcharts's range.
Possible values
'startValue' - the value from which the range will start
'endValue' - the value where the current range will end
'color' - the colour of the range
'opacity' - the opacity of the range
<template>
<JqxBulletChart ref="myBulletChart"
:width="500" :height="120" :ranges="ranges"
/>
</template>
<script>
import JqxBulletChart from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbulletchart.vue';
export default {
components: {
JqxBulletChart
},
data: function () {
return {
ranges: [
{
startValue: 0, endValue: 200, color: 'Blue', opacity: 0.6
},
{
startValue: 200, endValue: 250, color: 'Black', opacity: 0.3
}
]
}
}
}
</script>
|
|
showTooltip
|
Boolean
|
true
|
Sets ot gets the bulletcharts's showTooltip.
<template>
<JqxBulletChart ref="myBulletChart"
:width="500" :height="120" :showTooltip="false"
/>
</template>
<script>
import JqxBulletChart from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbulletchart.vue';
export default {
components: {
JqxBulletChart
}
}
</script>
|
|
target
|
Object
|
{ value: 85, label: "Target", size: 4, color: "" };
|
Sets ot gets the bulletcharts's target.
<template>
<JqxBulletChart ref="myBulletChart"
:width="500" :height="120" :target="target"
/>
</template>
<script>
import JqxBulletChart from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbulletchart.vue';
export default {
components: {
JqxBulletChart
},
data: function () {
return {
target: { value: 270, label: 'Value', thickness: 8, color: 'White' }
}
}
}
</script>
|
|
ticks
|
Object
|
{ position: "far", interval: 20, size: 10 }
|
Sets ot gets the bulletcharts's ticks.
Possible values for ticks.position
"near" - positions the ticks at the top of the ranges bar if the orientation is set to "horizontal" and at the left if the orientation is set to "vertical";
"far" - positions the ticks at the bottom of the ranges bar if the orientation is set to "horizontal" and at the right if the orientation is set to "vertical";
"both"
"none"
<template>
<JqxBulletChart ref="myBulletChart"
:width="500" :height="120" :ticks="ticks"
/>
</template>
<script>
import JqxBulletChart from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbulletchart.vue';
export default {
components: {
JqxBulletChart
},
data: function () {
return {
ticks: { position: 'near', interval: 20, size: 10 }
}
}
}
</script>
|
|
title
|
String
|
'Title'
|
Sets ot gets the bulletcharts's title.
<template>
<JqxBulletChart ref="myBulletChart"
:width="500" :height="120" :title="'Title'"
/>
</template>
<script>
import JqxBulletChart from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbulletchart.vue';
export default {
components: {
JqxBulletChart
}
}
</script>
|
|
tooltipFormatFunction
|
Function
|
null
|
Sets ot gets the bulletcharts's tooltipFormatFunction.
<template>
<JqxBulletChart ref="myBulletChart"
:width="500" :height="120" :tooltipFormatFunction="tooltipFormatFunction"
/>
</template>
<script>
import JqxBulletChart from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbulletchart.vue';
export default {
components: {
JqxBulletChart
},
methods: {
tooltipFormatFunction: function (pointerValue, targetValue) {
return 'Current: ' + pointerValue + '; Average: ' + targetValue
}
}
}
</script>
|
|
width
|
Number | String
|
500
|
Sets ot gets the bulletcharts's width.
<template>
<JqxBulletChart ref="myBulletChart"
:width="500" :height="120"
/>
</template>
<script>
import JqxBulletChart from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbulletchart.vue';
export default {
components: {
JqxBulletChart
}
}
</script>
|
|
|
|
change
|
Event
|
|
This event is triggered when the value is changed.
Code examples
Bind to the change event of jqxBulletChart.
<template>
<JqxBulletChart ref="myBulletChart" @change="onChange($event)"
:width="500" :height="120"
/>
</template>
<script>
import JqxBulletChart from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbulletchart.vue';
export default {
components: {
JqxBulletChart
},
methods: {
onChange: function (event) {
alert('do something...');
}
}
}
</script>
|
|
|
| Name | Arguments | Return Type |
|---|
|
destroy
|
None
|
None
|
Destroy the jqxBulletChart widget.
<template>
<JqxBulletChart ref="myBulletChart"
:width="500" :height="120"
/>
</template>
<script>
import JqxBulletChart from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbulletchart.vue';
export default {
components: {
JqxBulletChart
},
mounted: function () {
this.$refs.myBulletChart.destroy();
}
}
</script>
|
|
render
|
None
|
None
|
Renders the jqxBulletChart widget.
<template>
<JqxBulletChart ref="myBulletChart"
:width="500" :height="120"
/>
</template>
<script>
import JqxBulletChart from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbulletchart.vue';
export default {
components: {
JqxBulletChart
},
mounted: function () {
this.$refs.myBulletChart.render();
}
}
</script>
|
|
refresh
|
None
|
None
|
Refresh the jqxBulletChart widget.
<template>
<JqxBulletChart ref="myBulletChart"
:width="500" :height="120"
/>
</template>
<script>
import JqxBulletChart from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbulletchart.vue';
export default {
components: {
JqxBulletChart
},
mounted: function () {
this.$refs.myBulletChart.refresh();
}
}
</script>
|
|
val
|
value
|
Number
|
Sets or gets the selected value.
<template>
<JqxBulletChart ref="myBulletChart"
:width="500" :height="120"
/>
</template>
<script>
import JqxBulletChart from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbulletchart.vue';
export default {
components: {
JqxBulletChart
},
mounted: function () {
const value = this.$refs.myBulletChart.val(50);
}
}
</script>
|