javascript nvd3 离散条形图 y 轴标签
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17289403/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
nvd3 discreteBarChart y axis label
提问by Ramesh
I am using the following code to set the label in y-axis for discrete bar chart in nvd3 but it doesn't show the label for y-axis. BTW, x-axis label works fine.
我正在使用以下代码在 nvd3 中为离散条形图设置 y 轴中的标签，但它没有显示 y 轴的标签。顺便说一句，x 轴标签工作正常。
chart.yAxis.axisLabel('Students (in %)');
回答by cschroed
One thing to watch out for is that if the chart.marginvalue is too small on the left, there won't be enough room for the label to display. You can either adjust the chart.marginvalue or move the y-axis label closer to the chart by adjusting the axisLabelDistanceoption:
需要注意的一件事是，如果chart.margin左侧的值太小，标签将没有足够的空间显示。您可以chart.margin通过调整axisLabelDistance选项来调整值或将 y 轴标签移近图表：
chart.yAxis
.axisLabel('Students (in %)')
.axisLabelDistance(40);
回答by Christopher Chiche
The following works:
以下工作：
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;
});
You might have a typo somewhere.
您可能在某处打错了字。
回答by Saniya syed qureshi
For discrete bar chart, you can customize your chart options as shown below. You don't need to use all of this options for creating the chart model in you javascript code. It is quite enough to set up only the features you want to change and the others will take the default value.
对于离散条形图，您可以自定义图表选项，如下所示。您不需要使用所有这些选项来在您的 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
}
]
}
]
})