Ich verwende den folgenden Code, um die Beschriftung in der y-Achse für das diskrete Balkendiagramm in nvd3 festzulegen, aber es zeigt nicht die Beschriftung für die y-Achse. BTW, X-Achsen-Label funktioniert gut.nvd3 diskretBarChart y-Achsenbeschriftung
chart.yAxis.axisLabel('Students (in %)');
Die folgenden Werke:
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;
});
Sie könnten irgendwo einen Tippfehler haben.
Eine Sache, auf die Sie achten sollten, ist, dass wenn der chart.margin Wert zu klein auf der linken Seite ist, wird nicht genug Platz für die Anzeige des Etiketts sein. Sie können entweder den chart.margin Wert einzustellen oder die y-Achse Etikett näher an das Diagramm, indem die axisLabelDistance Option bewegen:
chart.yAxis
.axisLabel('Students (in %)')
.axisLabelDistance(40);
Gibt es eine Möglichkeit, dies mit dem xAchse zu tun? 'chart.margin' und' axisLabelDistance' funktionieren bei mir nicht, zumindest nicht auf 'multiBarChart()'. Danke –
Überprüfen Sie [diese Antwort] (http://stackoverflow.com/a/13472375/2622934). Sie können die Textrichtung mit den 'rotate' Werten und die Textposition mit den' translate' Werten einstellen. – cschroed
Für diskrete Balkendiagramm können Sie Ihre Kartenoptionen anpassen, wie unten dargestellt. Sie müssen nicht alle Optionen zum Erstellen des Diagrammmodells in Ihrem JavaScript-Code verwenden. Es genügt, nur die Funktionen einzurichten, die Sie geändert haben, und die anderen sind standardmäßig eingestellt.
'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
}
]
}
]
})
Für mich ist die Achsenbeschriftung zeigt nicht auf Inspektion nach oben, während die x-Achse hat –