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>