Je travaille avec NVD3 et j'ai quelques problèmes avec la réactivité des graphiques.Comment rendre les cartes NVD3 réactives?
Jusqu'à présent, j'ai réussi à créer plusieurs graphiques, mais ceux-ci débordent toujours le conteneur, provoquant la coupure des étiquettes yAxis ou la coupure des extrémités xAxis.
est ici une image de l'un des tableaux, où le axeY est coupé:
Ce sont les extraits de code que je utilise pour créer le graphique:
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>J'ai essayé de régler le viewBox et preserveAspectRatio propriétés du SVG, mais en vain.
J'ai aussi essayé sans succès ce qui est suggéré dans ces questions:
Responsive pie chart using NVD3
How to make a <svg> element expand or contract to its parent container?
Avez-vous une suggestion quant à la façon de rendre ces cartes sensibles?
Merci.
