英文:
chartJs Stacked bar chart border and legend not working
问题
我需要如下所示的堆叠条形图：
我的StackBlitz链接：
stackblitz
在这个参考代码中，我想要实现左侧边框半径。
还要显示条形图的每个块及其位置以及"top"位置的图例。
英文:
I required stacked bar chart as below:
my stackblitz link :
stackblitz
In this reference code I want to archive left-end side part border radius.
Also legend show each block of the bar-chart and its position "top".
答案1
得分: 2
边框半径，如文档 https://www.chartjs.org/docs/latest/charts/bar.html#borderradius 中所述，对于堆叠柱状图，如果边框半径以数字形式提供，它将应用于堆栈边缘的柱状图。
因此，您应该通过对象设置边框半径（还要注意 borderSkipped 选项），如下所示（使用您的示例）：
datasets: [
{
data: [30],
label: '88000 SGD',
backgroundColor: 'red', // '#EDFFFA',
borderWidth: 1,
borderColor: '#EDFFFA',
borderSkipped: 'end',
borderRadius: {topLeft: 15, bottomLeft: 15},
},
{
data: [30],
label: '240,000 SGD',
backgroundColor: '#06A6A6',
borderWidth: 1,
borderColor: '#06A6A6',
borderSkipped: 'start',
borderRadius: {topRight: 15, bottomRight: 15},
},
],
关于图例，您不能像图片中所示一样直接得到。可能需要使用插件。
英文:
For border radius, as written in the doc https://www.chartjs.org/docs/latest/charts/bar.html#borderradius, for stacked bar if the border radius is provided as number it will be applied to the bars that are at the edges of the stack.
Therefore you should set the border radius by object (pay attention to borderSkipped option as well), as following (using your sample):
datasets: [
{
data: [30],
label: '88000 SGD',
backgroundColor: 'red', //'#EDFFFA',
borderWidth: 1,
borderColor: '#EDFFFA',
borderSkipped: 'end',
borderRadius: {topLeft: 15, bottomLeft: 15},
},
{
data: [30],
label: '240,000 SGD',
backgroundColor: '#06A6A6',
borderWidth: 1,
borderColor: '#06A6A6',
borderSkipped: 'start',
borderRadius: {topRight: 15, bottomRight: 15},
},
],
For legend, you cannot have as showed in the picture out of the box. Probably you need a plugin.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论