x轴上的长文本在条形图ng2-charts中被剪切

时间:2018-08-20 05:42:20

标签: angular charts chart.js ng2-charts

我已经尝试了文档中的条形图,并且它可以很好地响应。但是,当我尝试使用网格布局输入长文本时,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;
        },
    }
}]

enter image description here

1 个答案:

答案 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;
}