nvd3离散条形图y轴标签
nvd3 discreteBarChart y axis label
我使用以下代码为nvd3中的离散条形图设置y轴标签,但它没有显示y轴标签。顺便说一句,x轴标签工作正常。
chart.yAxis.axisLabel('Students (in %)');
需要注意的一点是,如果左侧的chart.margin
值太小,则没有足够的空间显示标签。您可以调整chart.margin
值,也可以通过调整axisLabelDistance
选项将y轴标签移近图表:
chart.yAxis
.axisLabel('Students (in %)')
.axisLabelDistance(40);
以下作品:
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;
});
你可能在某个地方打错了字。
对于离散条形图,您可以自定义图表选项,如下所示。您不需要在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
}
]
}
]
})
相关文章:
- Chart.js条形图:网格颜色和隐藏标签
- 如何在Extjs5中更改条形图的标签
- Chart.js条形图标签在悬停时被隐藏
- ZingCharts水平堆叠条形图X轴标签被切断
- 堆积条形图标签-D3
- 在每个条形图的中间添加文本标签&鼠标悬停事件
- gRaphaël-带标签和日期的条形图示例
- 更新条形图并删除标签
- D3 垂直条形图为标签文本添加换行符
- Highcharts 单个水平堆叠条形图,始终显示数据名称(标签)和 %-年龄,并在鼠标悬停时显示数据编号和系列名称
- 剑道条形图类别标签基于值的左右
- D3JS 条形图:如何允许重复的 x 轴标签值
- 在堆叠条形图上显示标签
- 将事件添加到条形图的 X 轴标签
- 有没有办法防止 xaxis 标签在 flot.js 条形图中重叠
- 高图表 - 无法在条形图上看到所有标签
- D3堆积条形图添加数据标签并解决D3标签放置问题
- MPLD3:条形图的标签信息
- 在高图表水平条形图中显示所有标签
- 高图表条形图:可以在数据标签内组合数据点