Korzystam z poniższego kodu, aby ustawić etykietę w osi Y dla dyskretnego wykresu słupkowego w nvd3, ale nie pokazuje ona etykiety dla osi Y. BTW, etykieta osi x działa dobrze.nvd3 discreteBarChart etykieta osi y
chart.yAxis.axisLabel('Students (in %)');
następujące utwory:
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;
});
może masz literówkę gdzieś.
Jedną z rzeczy, na które należy zwrócić uwagę, jest to, że jeśli wartość chart.margin jest zbyt mała po lewej stronie, nie będzie miejsca na wyświetlaną etykietę. Można też ustawić wartość chart.margin lub przesunąć etykietę oś y bliżej wykresu poprzez dostosowanie opcji axisLabelDistance:
chart.yAxis
.axisLabel('Students (in %)')
.axisLabelDistance(40);
Czy istnieje sposób, aby zrobić to z OśX? 'chart.margin' i' axisLabelDistance' nie działają dla mnie, przynajmniej na 'multiBarChart()'. Dzięki –
Sprawdź [tę odpowiedź] (http://stackoverflow.com/a/13472375/2622934). Możesz dostosować kierunek tekstu za pomocą wartości 'obróć' i pozycji tekstowej z wartościami' translate'. – cschroed
Dla dyskretnego wykresie słupkowym, można dostosować opcje wykresu, jak pokazano poniżej. Nie musisz używać wszystkich tych opcji do tworzenia modelu wykresu w twoim kodzie javascript. Wystarczy skonfigurować tylko te funkcje, które zostały zmienione, a pozostałe będą domyślne.
'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
}
]
}
]
})
Dla mnie etykieta oś nie pokazać się na kontroli, podczas gdy oś x robi –