x 轴上的长文本被切割成条形图 ng2-charts答案

【问题标题】：Long text in x-axis is cut in bar graphs ng2-chartsx 轴上的长文本被切割成条形图 ng2-charts
【发布时间】：2018-09-20 15:08:05
【问题描述】：

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

【问题讨论】：

尝试使用 css 边距...
它没有帮助。画布已经加载了，所以我想 CSS 没什么可做的。
你可以格式化勾号..github.com/valor-software/ng2-charts/issues/254
以上代码是我尝试通过添加新行而不是空格来进行格式化的方式。似乎刻度只是将新行作为空格。

标签： angular charts chart.js ng2-charts

【解决方案1】：

在我的项目中遇到过这个问题后，我意识到 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;
}

【讨论】：