轴刻度标签文本的 Chartjs 断线
Chartjs break line for axes tick labels text
我试图允许在我的数据对象标签的空格上打断。我查看了 Chartjs 文档 tick configuration 上的配置选项,以允许换行或添加 CSS class 的能力,我可以在其中使用 break-word 规则处理此问题。
数据结构对象:
{
labels: ["Arts Languages and Communication", "Science, Techology and Health", "Business", "Society and Education"],
datasets: [{label: "Fall 2014", data: [0,0,0,0]}...]
}
选项对象:
{
scales: {
xAxes: [{ ticks: { /* no available options from docs */ } }]
}
}
期望的结果:
单词将在空格处中断:
Arts Language
and Communication
如果您希望 xAxis 标签包装文本,则需要以这种格式传递数据 labels: [['LONG', 'LONG', 'LONG', 'LABEL'], "Blue", ['YELLOW', 'LONG'], "Green Green", "Purple", "Orange"]
所以在你的情况下 -> labels:[['Arts Language', 'and Communication'], 'nextLabel', 'otherLabel']
我试图允许在我的数据对象标签的空格上打断。我查看了 Chartjs 文档 tick configuration 上的配置选项,以允许换行或添加 CSS class 的能力,我可以在其中使用 break-word 规则处理此问题。
数据结构对象:
{
labels: ["Arts Languages and Communication", "Science, Techology and Health", "Business", "Society and Education"],
datasets: [{label: "Fall 2014", data: [0,0,0,0]}...]
}
选项对象:
{
scales: {
xAxes: [{ ticks: { /* no available options from docs */ } }]
}
}
期望的结果:
单词将在空格处中断:
Arts Language
and Communication
如果您希望 xAxis 标签包装文本,则需要以这种格式传递数据 labels: [['LONG', 'LONG', 'LONG', 'LABEL'], "Blue", ['YELLOW', 'LONG'], "Green Green", "Purple", "Orange"]
所以在你的情况下 -> labels:[['Arts Language', 'and Communication'], 'nextLabel', 'otherLabel']