nvd3'teki ayrık çubuk grafiği için y ekseninde etiketi ayarlamak için aşağıdaki kodu kullanıyorum ancak y ekseninin etiketini göstermiyor. BTW, x ekseni etiketi iyi çalışıyor.nvd3 discreteBarChart y ekseni etiketi
chart.yAxis.axisLabel('Students (in %)');
aşağıdaki çalışır: Bir yerden bir yazım hatası olabilir
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;
});
.
Dikkat edilmesi gereken tek şey, chart.margin değerinin solda çok küçük olması durumunda, etiketin görüntülenmesine yetecek kadar yer kalmayacağıdır. Sen chart.margin değerini ayarlamak veya axisLabelDistance seçeneği ayarlayarak daha yakın grafiğe y ekseni etiketi taşıyabilirsiniz ya: aşağıda gösterildiği gibi
chart.yAxis
.axisLabel('Students (in %)')
.axisLabelDistance(40);
Xaxis ile bunu yapmanın bir yolu var mı oysa inceleme üzerine görünmüyor ekseni etiketi? "chart.margin" ve "axisLabelDistance" benim için en azından bir "multiBarChart()" üzerinde çalışmıyor. Teşekkürler –
[Bu yanıtı] gözden geçirin (http://stackoverflow.com/a/13472375/2622934). Metin yönünü 'döndürme 'değerleri ve metin konumu' çeviri 'değerleri ile ayarlayabilirsiniz. – cschroed
, kendi grafik seçeneklerini özelleştirebilirsiniz. Javascript kodunda grafik modelini oluşturmak için bu seçeneklerin tümünü kullanmanız gerekmez. Sadece değiştirdiğiniz özellikleri ve diğerlerini varsayılan olarak ayarlamak yeterlidir. Benim için
'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
}
]
}
]
})
x ekseni yapar –