CODEWITHSUNDEEP
vue.jsvuejs2
Liton Arefin
Liton Arefin

Reputation: 11

Trying to Implement gauge.js on Vue Js but not success

I'm trying to Implement gauge.js in Vue JS Application. 

 <template>
   <gauge-js level="90" marks="1,2,3" aperture="240" colors="80:#f8f3bc,100:#eee"></gauge-js>
 </template>


import Vue from 'vue'
import gauge from 'gauge-js'
Vue.component('gauge-js', gauge)

What I'm trying to do like:

  export default gauge.extend({
  props: [ 'data', 'marks' ],
  mounted () {

    level: 67;
    marks: [0,1,2,3,4,5,6];
    length: 400;
 }

But while import the js library of gauge.js it's showing out of stack memory size. Also I cann't extend gauge.js library.

If anyone can help me then I will be grateful. Thanks

Upvotes: 1

Views: 1163

Answers (1)

Eylen
Eylen

Reputation: 2677

A fast and dirty example so you can continue working: https://jsfiddle.net/96x2142c/2/

I have created a new component and I'm using it in the vue app. 

Vue.component('gauge-js', {
    props: ["level","marks","aperture","colors"],
    template: "<canvas id='myCanvas'></canvas>",
    mounted () {
      var opts = {
        angle: 0.15, /// The span of the gauge arc
        lineWidth: 0.44, // The line thickness
        pointer: {
          length: 0.9, // Relative to gauge radius
          strokeWidth: 0.035 // The thickness
        },
        colorStart: '#6FADCF',   // Colors
        colorStop: '#8FC0DA',    // just experiment with them
        strokeColor: '#E0E0E0'   // to see which ones work best for you
      };
      var target = document.getElementById('myCanvas'); // your canvas element
      var gauge = new Gauge(target).setOptions(opts); // create sexy gauge!
      gauge.maxValue = 3000; // set max gauge value
      gauge.setMinValue(0);  // set min value
      gauge.set(1250); // set actual value
   }
})

new Vue({
    el:"#app",
})

Upvotes: 3

Related Questions