1

Olá, estou desenvolvendo alguns dashboards com a biblioteca c3js e surgiu a necessidade de criar um gráfico "gauge" com ponteiro e áreas coloridas conforme o valor. Pelo que pesquisei, não tem uma maneira simples de fazer o mesmo com o C3js (sem fazer na unha com o D3). Então, pesquisando outras alternativas, achei o highcharts, que possui alguns tipos de gráficos Gauge, porém é necessário pagar uma licença para utilizar a biblioteca.

Fiz uns testes no codepen com o highcharts e cheguei a um resultado satisfatório, e gostaria de saber se há maneira de recriar este gráfico utilizando o C3js.

var gaugeOptions = {

  chart: {
    type: 'solidgauge'
  },

  title: null,

  pane: {
    center: ['50%', '85%'],
    size: '140%',
    startAngle: -90,
    endAngle: 90,
    background: {
      backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
      innerRadius: '70%',
      outerRadius: '100%',
      shape: 'arc'
    }
  },

  tooltip: {
    enabled: false
  },

  // the value axis
  yAxis: {
    stops: [
      [0.222222222, '#DF5353'], // red
      [0.444444444, 'orange'], // red
      [0.666666667, '#DDDF0D'], // yellow
      [1, '#55BF3B'], // green
    ],
    lineWidth: 0,
    minorTickInterval: null,
    tickAmount: 5,
    title: {
      y: -80
    },
    labels: {
      y: 20
    }
  },

  plotOptions: {
    solidgauge: {
      dataLabels: {
        y: 5,
        borderWidth: 0,
        useHTML: true
      },
      innerRadius: '70%'
    }
  }
};

// The speed gauge
var gaugeChart = Highcharts.chart('gauge', Highcharts.merge(gaugeOptions, {
  yAxis: {
    min: 0,
    max: 9000,
    title: {
      text: 'Entradas no Mês'
    },
    tickPositions: [0, 2000, 4000, 6000, 9000],
    plotBands: [{
      from: 0,
      to: 2000,
      color: '#DF5353',
      outerRadius: '68%'
    },{
      from: 2001,
      to: 4000,
      color: 'orange',
      outerRadius: '68%'
    },{
      from: 4001,
      to: 6000,
      color: '#DDDF0D',
      outerRadius: '68%'
    },{
      from: 6001,
      to: 9000,
      color: '#55BF3B',
      outerRadius: '68%'
    }],
    labels: {
      align: 'center',
      distance: -2,
    }
  },

  credits: {
    enabled: false
  },

  series: [{
    name: 'Value',
    data: [0],
    dataLabels: {
      format: '<div style="text-align:center"><span style="font-size:25px;color:' +
        ((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y}</span><br/>'
    },
    tooltip: {
      valueSuffix: ' km/h'
    }
  }]

}));

// Bring life to the dials
setInterval(function() {
  var point = gaugeChart.series[0].points[0];
  var value = Math.floor(Math.random() * 9000);
  point.update(value);
}, 3000);
.outer {
  width: 600px;
  height: 200px;
  margin: 0 auto;
}
.container {
  width: 300px;
  float: left;
  height: 200px;
}
.highcharts-yaxis-grid .highcharts-grid-line {
  display: none;
}

@media (max-width: 600px) {
  .outer {
    width: 100%;
    height: 400px;
  }
  .container {
    width: 300px;
    float: none;
    margin: 0 auto;
  }

}
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>

<script src="https://code.highcharts.com/modules/solid-gauge.js"></script>

<div class="outer">
  <div id="gauge" class="container"></div>
</div>

0

Você deve fazer log-in para responder a esta pergunta.

Pesquise outras perguntas com a tag .