J'utilise le code suivant pour définir l'étiquette dans l'axe de Y pour le graphique à barres discret dans NVD3, mais cela ne montre pas l'étiquette de l'axe Y. BTW, étiquette de x-axe fonctionne bien.
chart.yAxis.axisLabel('Students (in %)');
3 Réponses :
Les travaux suivants:
nv.addGraph(function() {
var chart = nv.models.discreteBarChart()
.x(function(d) { return d.label })
.y(function(d) { return d.value })
.staggerLabels(true)
.tooltips(false)
.showValues(true)
chart.yAxis.axisLabel("Students (in %)")
d3.select('#chart svg')
.datum(data)
.transition().duration(500)
.call(chart);
nv.utils.windowResize(chart.update);
return chart;
});
Pour moi, l'étiquette axe ne s'affiche pas sur l'inspection alors que l'axe X ne le fait
Une chose à regarder est que si la valeur graphique.margin est trop petite à gauche, il n'y aura pas assez de place pour que l'étiquette soit affichée. Vous pouvez soit ajuster la valeur graph.margin ou déplacer l'étiquette d'axe des Y plus proche du graphique en ajustant l'option axislabeldistance :
Y a-t-il un moyen de le faire avec la xaxis? grapht.margin et Axislabeldistance Ne fonctionne pas pour moi, au moins sur un multiibarchart () . Merci
Découvrez Cette réponse . Vous pouvez ajuster la direction du texte avec les valeurs rotation et la position de texte avec les valeurs traduire .
Pour la carte à barres discrète, vous pouvez personnaliser vos options de graphique, comme indiqué ci-dessous. Vous n'avez pas besoin d'utiliser toutes ces options pour créer le modèle de carte dans votre code JavaScript. Il suffit de configurer uniquement les fonctionnalités que vous souhaitez modifier et les autres prendront la valeur par défaut.
'use strict';
angular.module('mainApp.controllers')
.controller('discreteBarChartCtrl', function($scope){
$scope.options = {
chart: {
type: 'discreteBarChart',
height: 450,
margin : {
top: 20,
right: 20,
bottom: 50,
left: 55
},
x: function(d){return d.label;},
y: function(d){return d.value;},
showValues: true,
valueFormat: function(d){
return d3.format(',.4f')(d);
},
duration: 500,
xAxis: {
axisLabel: 'X Axis'
},
yAxis: {
axisLabel: 'Y Axis',
axisLabelDistance: -10
}
}
};
$scope.data = [
{
key: "Cumulative Return",
values: [
{
"label" : "A" ,
"value" : -29.765957771107
} ,
{
"label" : "B" ,
"value" : 0
} ,
{
"label" : "C" ,
"value" : 32.807804682612
} ,
{
"label" : "D" ,
"value" : 196.45946739256
} ,
{
"label" : "E" ,
"value" : 0.19434030906893
} ,
{
"label" : "F" ,
"value" : -98.079782601442
} ,
{
"label" : "G" ,
"value" : -13.925743130903
} ,
{
"label" : "H" ,
"value" : -5.1387322875705
}
]
}
]
})