图表.js Y 轴标签，反向工具提示顺序，缩短 X 轴标签

Question

我正在使用Chart.js创建一个堆叠条形图。但是，我在文档中找不到如何更改某些内容。

1. 如何在 Y 轴上添加标签。
2. 如何缩短 X 轴上的标签，使其仅显示 前 10 个字母。
3. 如何反转值的显示顺序 工具提示。

这些窃贼可以实施吗？

我已经在这里标记了我想更改的内容。

以下是我的图表选项现在的样子：

var ctx = $("#newchart");
var barGraph = new Chart(ctx, {
type: 'bar',
data: chartdata,
options: {
barValueSpacing: 20,
tooltips: {
enable: true,
mode: 'label',
callbacks: {
label: function(tooltipItem, data){
var datasetLabel = data.datasets[tooltipItem.datasetIndex].label || '';
return datasetLabel + ': ' + Number(tooltipItem.yLabel) + ' Users';
}
}
},
responsive: true,
segmentShowStroke: true,
scales: {
xAxes: [{
display: false,
stacked: true,
ticks:{
stepSize : 10,
},
gridLines: {
lineWidth: 0,
color: "#9E9E9E"
}
}],
yAxes: [{
stacked: true,
ticks: {
min: 0,
stepSize: 10,
},
gridLines: {
lineWidth: 0,
color: "#9E9E9E"
}
}]
}
}
});

Answer 1

1. 添加 Y 轴标签

在yAxes对象中，给它一个scaleLabel对象，该对象接受labelString(示例小提琴)

yAxes: [{
scaleLabel: {
labelString: 'Value'
}
}]

2. 缩短 xAxis 类别标签

为此，您可以将userCallback函数传递给 xAxis ticks 对象，该对象可以返回所需的输出。该函数将在其第一个参数中采用原始标签，因此您只需返回所需长度的子字符串，例如小提琴

xAxes: [{
ticks: {
userCallback: function(label, index, labels) {
if(typeof label === "string")
{
return label.substring(0,1)
}
return label;
},
}
}],

3. 反转工具提示顺序

tooltips对象接受一个名为itemSort的函数，该函数可以传递给Array.prototype.sort。

所以你可以像下面这样，但你可能还需要比较对象索引和数据集索引以获得你想要的结果。(示例小提琴)

tooltips: {
mode: 'label',
itemSort: function(a, b) {
return b.datasetIndex - a.datasetIndex
},
},