我在https://www.chartjs.org/docs/latest/samples/bar/stacked.html处使用了堆叠条形图
它目前看起来像这样:
配置:
const config = {
type: 'bar',
data: data,
options: {
plugins: {
title: {
display: true,
text: 'Chart.js Bar Chart - Stacked'
},
},
responsive: true,
indexAxis: 'y',
scales: {
x: {
stacked: true,
title: {
display: true,
text: 'x-axis description',
},
},
y: {
ticks: {
mirror: true,
z: 1,
backdropColor: 'rgba(255, 0, 255, 0.75)'
},
stacked: true,
title: {
display: true,
text: 'y-axis description',
},
}
}
}
};
设置:
const labels = ['Short Label', 'vryshrtlbl', 'a litle bit more longer label', 'pretty veeeeeeeeeeeeeeeeeeeeeerylong label', 'ultra extreeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeemly long label']
const data = {
labels: labels,
datasets: [
{
label: 'Losers',
data: [-1,-2,-3,-44,-5],
backgroundColor: 'rgba(255, 0, 0, 0.5)',
},
{
label: 'Winners',
data: [6,12,23,55,5],
backgroundColor: 'rgba(255, 0, 0, 1)',
}
]
};
问题是,我可能有这么长的标签。因为我不想浪费空间,使实际的图表更小,我决定把刻度标签到图表区域。但我会让他们更容易看到:
1.然后可以向右/中心移动一点
- 我已经尝试过填充,但这也会缩小图表区域,这是行不通的
1.在刻度标签后面添加一个背景色,如灰色框,这样文本后面就不会从白色背景切换到红色条
- 我肯定会实现这一点与backdropcolor位此选项不做任何事情。
- 从文档中,我确信我正确放置了设置,但在刻度标签后面看不到任何背景
有什么想法为什么这不起作用吗?
顺便说一句:我试图提供一个jsfiddle,但是当我把代码放在那里时,它忽略了'indexAxis'属性和'stacked:true "。第一个问题我可以使用" type:"horizontalBar""。但不是堆叠的。这是某种古老的书写方式吗?在chartjs页面上,他们只使用" bar "。如果这个问题也能得到回答,那么我将来可能会准备一把小提琴。
但是可以通过转到https://www.chartjs.org/docs/latest/samples/bar/stacked.html并将上面的内容替换为我的内容来重现我的问题。
谢谢。
1条答案
按热度按时间rqcrx0a61#
那么对于你的问题的第一部分,我没有解决方案。(这可能是可能的,如果你写一个插件左右,但没有开箱即用的解决方案,据我所知)
对于第二部分“灰盒子”,请查看下面的演示。
简而言之,您必须将参数
showLabelBackdrop
设置为true
。这里有一个演示,我将如何做到这一点: