Angular NVD-3 图:轴标签和轴编号被截断并在视图之外 Window
Angular NVD-3 Graph: Axis Labels and Axis Numbers Cut Off and Outside of Viewing Window
目前我正在使用angular-nvd3 绘图来显示数据。但是,堆叠面积图 nvd3 图形类型正在切断数字和轴标签。模板图可以查看here。 y 轴数字和标签是主要关注点。以下是图表选项代码和问题图片。
有没有办法缩小尺寸,防止y轴数字和标签被截断?
$scope.optionsStacked = {
chart: {
type: 'stackedAreaChart',
height: 450,
margin : {
top: 20,
right: 20,
bottom: 30,
left: 40
},
x: function(d){return d[0];},
y: function(d){return d[1]/100;},
useVoronoi: false,
clipEdge: true,
duration: 100,
useInteractiveGuideline: true,
xAxis: {
axisLabel: 'Time (Years)',
axisLabelDistance: -8,
showMaxMin: false,
tickFormat: function(d) {
return d3.time.format('%Y')(new Date(d))
},
showMaxMin: true
},
yAxis: {
axisLabel: 'arb units',
axisLabelDistance: -4,
tickFormat: function(d){
return d3.format(',.2f')(d);
}
},
zoom: {
enabled: true,
scaleExtent: [1, 10],
useFixedDomain: false,
useNiceScale: false,
horizontalOff: false,
verticalOff: true,
unzoomEventType: 'dblclick.zoom'
}
}
};
尝试增加 margin.left
。它将使 y 轴值成为 space。
目前我正在使用angular-nvd3 绘图来显示数据。但是,堆叠面积图 nvd3 图形类型正在切断数字和轴标签。模板图可以查看here。 y 轴数字和标签是主要关注点。以下是图表选项代码和问题图片。
有没有办法缩小尺寸,防止y轴数字和标签被截断?
$scope.optionsStacked = {
chart: {
type: 'stackedAreaChart',
height: 450,
margin : {
top: 20,
right: 20,
bottom: 30,
left: 40
},
x: function(d){return d[0];},
y: function(d){return d[1]/100;},
useVoronoi: false,
clipEdge: true,
duration: 100,
useInteractiveGuideline: true,
xAxis: {
axisLabel: 'Time (Years)',
axisLabelDistance: -8,
showMaxMin: false,
tickFormat: function(d) {
return d3.time.format('%Y')(new Date(d))
},
showMaxMin: true
},
yAxis: {
axisLabel: 'arb units',
axisLabelDistance: -4,
tickFormat: function(d){
return d3.format(',.2f')(d);
}
},
zoom: {
enabled: true,
scaleExtent: [1, 10],
useFixedDomain: false,
useNiceScale: false,
horizontalOff: false,
verticalOff: true,
unzoomEventType: 'dblclick.zoom'
}
}
};
尝试增加 margin.left
。它将使 y 轴值成为 space。