Chartjs 轴刻度线标签文本断线

Cra*_*tis 8 chart.js chartjs-2.6.0

在此输入图像描述

我试图允许数据对象标签的空格中断。我查看了 Chartjs 文档勾选配置上的配置选项,以允许换行或添加 CSS 类,我可以使用断词规则来处理此问题。

数据结构对象:

{
    labels: ["Arts Languages and Communication", "Science, Techology and Health", "Business", "Society and Education"],
    datasets: [{label: "Fall 2014", data: [0,0,0,0]}...]
}
Run Code Online (Sandbox Code Playgroud)

选项对象:

{
    scales: {
        xAxes: [{ ticks: { /* no available options from docs */ } }]
    }
}
Run Code Online (Sandbox Code Playgroud)

期望的结果:

单词会因空格而中断:

Arts Language
and Communication
Run Code Online (Sandbox Code Playgroud)

Kun*_*ara 19

如果您希望 xAxis 标签自动换行,那么您需要以此格式传递数据labels: [['LONG', 'LONG', 'LONG', 'LABEL'], "Blue", ['YELLOW', 'LONG'], "Green Green", "Purple", "Orange"]

所以在你的情况下 ->labels:[['Arts Language', 'and Communication'], 'nextLabel', 'otherLabel']

查看工作演示:http://jsfiddle.net/Lzo5g01n/11/