我使用以下代码在y轴中为nvd3中的离散条形图设置标签,但它不显示y轴的标签。顺便说一下,x轴标签工作正常。
chart.yAxis.axisLabel('Students (in %)');
答案 0 :(得分:21)
需要注意的一点是,如果左侧的chart.margin
值太小,标签就没有足够的空间来显示。您可以调整chart.margin
值,也可以通过调整axisLabelDistance
选项将y轴标签移近图表:
chart.yAxis
.axisLabel('Students (in %)')
.axisLabelDistance(40);
答案 1 :(得分:6)
以下作品:
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;
});
你可能在某个地方有拼写错误。
答案 2 :(得分:0)
对于离散条形图,您可以自定义图表选项,如下所示。您不需要使用所有这些选项在javascript代码中创建图表模型。仅设置您想要更改的功能就足够了,其他功能将采用默认值。
'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
}
]
}
]
})