मैं एनवीडी 3 में अलग बार चार्ट के लिए वाई-अक्ष में लेबल सेट करने के लिए निम्न कोड का उपयोग कर रहा हूं लेकिन यह वाई-अक्ष के लिए लेबल नहीं दिखाता है। बीटीडब्ल्यू, एक्स-अक्ष लेबल ठीक काम करता है।nvd3 discreteBarChart y अक्ष लेबल
chart.yAxis.axisLabel('Students (in %)');
निम्नलिखित काम करता है:
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;
});
आपसे कोई टाइपिंग त्रुटि कहीं हो सकता है।
यह देखने के लिए एक बात यह है कि यदि chart.margin मूल्य बाईं ओर बहुत छोटा है, तो लेबल प्रदर्शित करने के लिए पर्याप्त जगह नहीं होगी। आप या तो chart.margin मूल्य समायोजित या axisLabelDistance विकल्प का समायोजन करके चार्ट के करीब y- अक्ष लेबल स्थानांतरित कर सकते हैं:
chart.yAxis
.axisLabel('Students (in %)')
.axisLabelDistance(40);
वहाँ xAxis के साथ ऐसा करने का कोई तरीका है निरीक्षण पर दिखाई नहीं देता? 'chart.margin' और 'axisLabelDistance' कम से कम' multiBarChart() 'पर मेरे लिए काम नहीं करते हैं। धन्यवाद –
[यह उत्तर] देखें (http://stackoverflow.com/a/13472375/2622934)। आप 'घुमावदार मानों और 'अनुवाद' मानों के साथ टेक्स्ट स्थिति के साथ टेक्स्ट दिशा समायोजित कर सकते हैं। – cschroed
असतत बार चार्ट के लिए, आप अपने चार्ट विकल्प के रूप में नीचे दिखाया गया है अनुकूलित कर सकते हैं। आपको जावास्क्रिप्ट कोड में चार्ट मॉडल बनाने के लिए इन सभी विकल्पों का उपयोग करने की आवश्यकता नहीं है। केवल आपके द्वारा बदली गई सुविधाओं को स्थापित करने के लिए पर्याप्त है और अन्य डिफ़ॉल्ट होंगे।
'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
}
]
}
]
})
मेरे लिए अक्ष लेबल जबकि एक्स अक्ष करता –