我有一个堆叠条形图,其中工具提示显示 Label: $value & 我希望将其设置为空格,以便 Label 向左对齐 & $value 向右对齐,允许所有数值对齐。例如:
Label 1: $10,000
Label 2: $50,000
Label 3: $100,000
这是计算器。只需按下复合按钮即可显示图表。
https://youthful-euclid-784d05.netlify.app
ChartJS 选项:
// Configuration options go here
options: {
responsive: true,
maintainAspectRatio: true,
legend: {
display: true,
position: "bottom"
},
scales: {
xAxes: [{
ticks: {
fontSize: 16,
fontFamily: "Roboto Condensed"
},
gridLines: {
display: false,
},
scaleLabel: {
display: true,
labelString: 'Year',
fontSize: 16,
fontFamily: "Roboto Condensed"
},
stacked: true,
}],
yAxes: [{
stacked: true,
ticks: {
maxTicksLimit: 5,
beginAtZero: true,
fontSize: 12,
fontFamily: "Roboto Condensed",
callback: function (value, index, values) {
if (parseInt(value) >= 1000) {
return (
numeral(value).format("$0a")
// "$" + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")
);
} else {
// return "$" + value;
}
},
},
}, ],
},
legend: {
display: true,
labels : {
fontSize: 14,
fontFamily: "Roboto Condensed",
},
},
chart: {
},
tooltips: {
// displayColors: false,
yAlign: "bottom",
callbacks: {
title: function (tooltip, data) {
return `After ${tooltip[0].label} Years`;
},
label: function(tooltipItems, data) {
return ` ${data.datasets[tooltipItems.datasetIndex].label}: ${formatCurrency(tooltipItems.value)}`;
},
},
// bodyAlign: "center",
titleFontSize: 15,
titleMarginBottom: 10,
bodySpacing: 10,
bodyFontSize: 12,
mode: "x",
xPadding: 10,
yPadding: 10,
// bodySpacing: "5"
},
}