Bonjour @Spine ,
Serait-il possible de partager ce que tu as fait avec les Solid Gauge en 4.1 ?
Je vois bien en effet que la classe « .highcharts-color-0 » a été déplacé dans une sous classe mais impossible de changer les couleurs de mon côté.
Je chercher à faire quelque chose qui ressemble à çà :
Le but étant d’avoir la valeur numérique au mileu et la gauge qui se rempli au fur et à mesure entre 0 et 120. Au delà de 120, la gauge sera pleine mais la valeur numérique au mileu continuera à s’incrémenter.
Je suis parti de cet exemple et je l’ai modifié comme ceci :
Résumé
$(function() {
var rawData = 94,
data = getData(rawData);
function getData(rawData) {
var data = [],
start = Math.round(Math.floor(rawData / 10) * 10);
data.push(rawData);
for (i = start; i > 0; i -= 10) {
data.push({
y: i
});
}
return data;
}
Highcharts.chart('container', {
chart: {
type: 'solidgauge',
marginTop: 10
},
title: {
text: ''
},
subtitle: {
text: rawData,
style: {
'font-size': '60px'
},
y: 160,
zIndex: 7
},
tooltip: {
enabled: false
},
pane: [{
startAngle: -180,
endAngle: 180,
background: [{ // Track for Move
outerRadius: '100%',
innerRadius: '80%',
backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0.3).get(),
borderWidth: 0,
shape: 'arc'
}],
size: '100%',
center: ['50%', '50%']
}, {
startAngle: -180,
endAngle: 180,
size: '80%',
center: ['50%', '50%'],
background: []
}],
yAxis: [{
min: 0,
max: 120,
lineWidth: 2,
lineColor: 'white',
tickInterval: 30,
labels: {
enabled: false
},
minorTickWidth: 0,
tickLength: 50,
tickWidth: 5,
tickColor: 'white',
zIndex: 6,
stops: [
[0, '#3385ff'],
[0.25, '#3385ff'],
[0.5, '#3385ff'],
[0.75, '#3385ff'],
[1, '#3385ff']
]
}, {
linkedTo: 0,
pane: 1,
lineWidth: 5,
lineColor: 'white',
tickPositions: [],
zIndex: 6
}],
series: [{
animation: false,
dataLabels: {
enabled: false
},
borderWidth: 0,
color: Highcharts.getOptions().colors[0],
radius: '100%',
innerRadius: '80%',
data: data
}]
});
});
mais je galère pour l’intégrer dans un widget …