我已经尝试了文档中的条形图,并且它可以很好地响应。但是,当我尝试使用网格布局输入长文本时,x轴的刻度将被切断,如下所示。我在这里使用ng2-charts。我已经尝试过回调函数,但似乎不起作用。
xAxes: [{
stacked: false,
scaleLabel: {
labelString: 'Month'
},
ticks: {
stepSize: 1,
autoSkip: false,
mirror: true,
"callback": function (tick, index) {
tick = tick.replace(' and ', ' & ');
if (tick.length > 20) {
tick = tick.split(" ").join("\n");
} else {
tick;
}
return tick;
},
}
}]
答案 0 :(得分:0)
在我的项目中遇到此问题后,我意识到ng2-charts不能为您提供可以显示较长刻度线的功能。所以我不得不转向谷歌图表。
NPM documentation for ng2-google-charts
如果您在配置时遇到困难,请参阅此article-在Angular 4项目中使用Google图表
如果无法在移动视图中滚动,请使用css之类的
<div class="google-chart-row">
<pie-chart [data]="question.googleChartData" [elementId]="question.questionId"></pie-chart>
</div>
.google-chart-row{
display: block;
width: 100 %;
overflow-x: auto;
-ms-overflow-style: -ms-autohiding-scrollbar;
}