我正在使用NVD3并且在图表的响应性方面遇到了一些麻烦。
到目前为止,我已经设法创建了几个图表,但这些图表总是溢出容器,导致yAxis标签被切割或xAxis四肢被切割。
这是其中一张图表的图片,其中yAxis被剪切:
这些是我用来创建图表的代码片段:
nv.addGraph(function() {
chart = nv.models.lineChart()
.useInteractiveGuideline(false);
if (data.hasOwnProperty("key") && isColumnTotalChart || isRowTotalChart) {
chart.xAxis
.axisLabel(data.chartDataset.key);
}
chart.xAxis.tickValues(data.chartLabelIndexes)
.tickFormat(function(d) {
return data.chartLabels[d];
});
chart.yAxis.tickFormat(d3.format(',.1f'));
if (chartData.labels.length > 10) {
chart.xAxis.rotateLabels(-90);
}
chart.xAxis.showMaxMin(true);
d3.selectAll(chartSelectedSvg + " > *").remove();
d3.select(chartSelectedSvg)
.datum(data.chartDataset)
.transition().duration(500)
.call(chart);
nv.utils.windowResize(chart.update);
return chart;
});
div>svg {
min-height: 30vh;
margin: 0 auto;
display: block;
}
<div ng-show="chartColumnData.data.length !== 0">
<div id="chartTotalColumns" ng-show="chartColumnData.data.length !== 0">
<svg></svg>
</div>
<div layout="row" layout-padding layout-align="center center" ng-show="chartColumnData.data.length !== 0">
</div>
</div>
我尝试设置SVG的 viewBox 和 preserveAspectRatio 属性,但无济于事。
我也没有成功尝试过这些问题的建议:
Responsive pie chart using NVD3
How to make a <svg> element expand or contract to its parent container?
您对如何使这些图表响应有任何建议吗?
谢谢。
答案 0 :(得分:2)
看完之后:
Y axis label not displaying large numbers - Multi-Bar Chart
我已经设法解决了这个问题:只需调整边距即可解决问题。
According to the documentation,要调整所有图表边距,您必须使用以下代码行:
chart.margin({"left":5,"right":5,"top":10,"bottom":10})
如果您只需要设置一个保证金,那么您必须这样做:
chart.margin().left = 50;