Je veux créer des graphiques à barres avec navigateur, sélecteur de plage, axe y des deux côtés et secteur du graphique. Je l'implémente en utilisant Highcharts.Chart() mais son axe x ne vient pas correctement. lorsque je crée correctement l'axe des x après avoir changé les catégories en ["2017-2-3 '], le sélecteur de plage passe à 1970 (valeur par défaut) donc je convertis la date en millisecondes. Maintenant, sur l'axe des x, j'ai des valeurs indésirables. Je veux afficher uniquement les valeurs de l'axe des x qui s'affichent dans le tableau des catégories. Actuellement 1m, 3m, 6m ne fonctionne pas, je pense que cela se produit à cause de ce problème d'axe des x.
jsfiddle: http://jsfiddle.net/m05sgk3j/1/
$(document).ready(function() {
var categories = [1551420000000,1549000800000,1546322400000,1543644000000,1541052000000, 1538373600000, 1535781600000,1533103200000, 1530424800000, 1527832800000, 1525154400000, 1522562400000, 1519884000000, 1517464800000,1514786400000];
new Highcharts.Chart({
chart: {
renderTo: 'container'
},
title: {
text: 'In March 2019, the average CT_HOURS is 10.55 hours.'
},
rangeSelector: {
enabled: true,
buttons: [{
type: 'millisecond',
count: 1,
text: '1m'
}, {
type: 'millisecond',
count: 3,
text: '3m'
}, {
type: 'millisecond',
count: 6,
text: '6m'
}, {
type: 'all',
text: 'All'
}],
selected: 4,
inputDateFormat: '%Y-%m-%d',
inputEditDateFormat: '%Y-%m-%d'
},
navigator: {
enabled: true,
xAxis: {
tickInterval: 15,
labels: {
/* formatter: function() {
return categories[this.pos]
} */
}
}
},
scrollbar: {
enabled: true
},
xAxis: {
// categories: categories,
type: 'datetime',
tickInterval : 2,
// tickInterval: {_tickInterval},
/* labels: {
step:10
}, */
/* maxZoom: 30 * 24 * 3600000, */
dateTimeLabelFormats : {
day: '%Y-%m'
}
// crosshair: true,
// minRange: 1
},
yAxis: [{ // Primary yAxis
labels: {
format: '{value}h',
style: {
color: Highcharts.getOptions().colors[1]
}
},
title: {
text: 'AVERAGE CT_HOURS',
style: {
color: Highcharts.getOptions().colors[1]
}
}
}, { // Secondary yAxis
title: {
text: 'REQUEST COUNT',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '{value}',
style: {
color: Highcharts.getOptions().colors[0]
}
},
opposite: true
}],
series: [{
name: 'REQUEST COUNT',
type: 'column',
yAxis: 1,
data: [
[1551420000000, 49.9],
[1549000800000, 71.5],
[1546322400000, 106.4],
[1543644000000, 129.2],
[1541052000000, 144.0],
[1538373600000, 176.0],
[1535781600000, 135.6],
[1533103200000, 148.5],
[1530424800000, 49.9],
[1527832800000, 71.5],
[1525154400000, 106.4],
[1522562400000, 129.2],
[1519884000000, 144.0],
[1517464800000, 176.0],
[1514786400000, 135.6]
],
tooltip: {
valueSuffix: ''
}
}, {
name: 'AVERAGE CT_HOURS',
type: 'spline',
data: [[1551420000000, 56.6],
[1549000800000, 46.3],
[1546322400000, 32.8],
[1543644000000, 43.4],
[1541052000000, 40.8],
[1538373600000, 43.0],
[1535781600000, 43.1],
[1533103200000, 44.6],
[1530424800000, 45.7],
[1527832800000, 27.8],
[1525154400000, 39.9],
[1522562400000, 29.3],
[1519884000000, 27.9],
[1517464800000, 27.4],
[1514786400000, 17.6]],
tooltip: {
valueSuffix: 'h'
}
}]
});
});
3 Réponses :
Tout d'abord, vous avez des données non triées. Si vous souhaitez inverser vos données, utilisez l'option reversed .
De plus, le rangeSelector et le tickInterval sont erronés. Si vous utilisez l'axe datetime , l'unité de base est une milliseconde.
Cependant, pour afficher les dates uniquement à partir du tableau des categories , utilisez l'option tickPositions et la fonction de formatter pour les étiquettes:
xAxis: {
reversed: true,
minRange: 1,
type: 'datetime',
tickPositions: categories,
labels: {
formatter: function() {
return Highcharts.dateFormat('%Y-%m', this.value);
}
}
},
Démo en direct: http://jsfiddle.net/BlackLabel/a6Lphq4k/
Référence API:
https://api.highcharts.com/highcharts/xAxis.reversed
https://api.highcharts.com/highcharts/xAxis.tickPositions
https://api.highcharts.com/highcharts/xAxis.labels.formatter
(1) Tout d'abord, assurez-vous toujours d'injecter des horodatages dans vos catégories et de les mettre en forme dans:
(1-1) Fonction xAxis.labels.formatter [pour les étiquettes de l'axe des x]
(1-2) fonction navigator.xAxis.labels.formatter [pour le format des étiquettes de navigation)
(2) Deuxièmement, assurez-vous que vous effacez vos (xAxis.categories) si vous y insérez des données. parce que les highcharts ne trient pas votre tableau. si vous attribuez simplement un nouveau tableau, ce n'est pas grave.
(3) Remarque: En fonction des valeurs de votre tableau de catégories, la navigation obtient des valeurs telles que xAxis min et xAxis Max. lorsque vous modifiez vos données, ces valeurs restent et c'est pourquoi votre navigation s'effondre. donc lors de la modification des données, assurez-vous de mettre à jour. vous pouvez utiliser 0 pour le minimum de navigateur et categories.length pour la valeur maximum du navigateur. vous pouvez également accéder aux valeurs mises à jour dans dataMin et dataMax.
J'espère que cette réponse vous aidera.