在 ChartJs 中将长标签更改为多行(换行)标签
change long labels to multiline(wrap) label in ChartJs
(↑ 这根本不是我问题的答案!! :( (
嗨~我正在使用chartJS绘制折线图。
var areaChartData = {
labels: ["2016-02-11_19:59:24", "2016-02-11_20:59:24", "2016-02-12_21:59:24", "2016-02-21_22:59:24", "2016-02-21_23:59:24", "2016-02-22_19:59:24", "2016-02-22_23:59:24", "2016-02-23_23:59:24", "2016-02-24_23:59:24", "2016-02-25_23:59:24"],
datasets: [
{
label: "Elec",
fillColor: "rgba(210, 214, 222, 1)",
strokeColor: "rgba(210, 214, 222, 1)",
pointColor: "rgba(210, 214, 222, 1)",
pointStrokeColor: "#c1c7d1",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: [65, 59, 80, 81, 56, 55, 40, 23, 22, 21]
},
{
label: "Goods",
fillColor: "rgba(60,141,188,0.9)",
strokeColor: "rgba(60,141,188,0.8)",
pointColor: "#3b8bba",
pointStrokeColor: "rgba(60,141,188,1)",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(60,141,188,1)",
data: [28, 48, 40, 19, 86, 27, 90, 23, 22, 21]
}
]
};
我无法在没有角度的情况下显示图表中的标签,因为标签太长而无法显示。我想在轴标签中将标签更改为多行标签
2016-02-11_19:59:24
自
2016年02月11
日19:59:24
如何更改选项或 Char.js 脚本?
http://jsfiddle.net/TZq6q/242/
http://jsfiddle.net/zruvru23/1/
根据官方示例存储库,您应该将单行放入另一个数组中:
data: {
labels: [['June', '2015'], 'July', '...', ['January', '2016'], 'February', '...'],
// Rest of config
在这种情况下,June 2015
和January 2016
将有一年的新行,其余的标签不会被包装。
该示例来自折线图,我也用条形图对其进行了测试,但它应该适用于所有图表类型。
使用 ChartsJS 的 2.7.2 版测试
将标签定义更改为:
labels: [["2016-02-11", "19:59:24"], ["2016-02-11","20:59:24"]]
您可以将长标签名称更改为数组,chartjs 会将每个元素拆分为一行,此示例对我有用:
labels: ['DAB', ['Park', 'Assist'], ['Lane', 'Assist'], ['Smartphone', 'Interface'], 'GPS', 'LED']
但是,在这种情况下,当您将鼠标移到图表上时,显示的工具提示将用逗号分隔每行,在我的例子中,["Park","Assist"]将在工具提示上显示为"Park,Assis"。要解决此问题,您必须在工具提示回调中通过空格删除逗号,如下所示:
tooltips: {
enabled: true,
callbacks: {
title: function(tooltipItem, data) {
return data.labels[tooltipItem.index];
},
label: function(tooltipItem, data) {
let dataval = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
let dslabels = data.labels[tooltipItem.index];
// Remove the comma
dslabels = dslabels.toString().replace(",", " ");
return ' ' + dslabels + ' : ' + dataval + '%';
}
}
},
相关文章:
- D3 垂直条形图为标签文本添加换行符
- 返回标签的文本值,并在每个标签后附加换行符
- 选择 h2 标签的前两个单词并换行 span 标签
- 在 ChartJs 中将长标签更改为多行(换行)标签
- 我可以防止 angular 在我的 pre 标签中插入换行符吗?
- 如何使用Aurelia将换行符渲染为
标签 - 向D3图形y轴标签添加换行符
- 将换行符替换为<br>标签
- Jquery换行符替换为br标签不工作
- Jquery标签删除导致换行
- 如何用jQuery在span标签中换行文本,除了第一个单词
- 替换某些文本开头的html标签中的制表符和换行符
- 如何避免使用p标签进行换行
- 在span标签中换行文本
- 输入标签后换行
- 使用javascript用html标签只换行选定的文本
- 换行一组没有标记和随机的段落
在p标签中 - 在编辑器可视化模式下,在短码标签后强制换行
- 在span标签中换行文本,知道文本的开始和结束位置
- 找到一个特定的单词并用span标签换行