javascript chartJs堆积条形图边框和图例不起作用

hts6caw3  于 2023-03-16  发布在  Java
关注(0)|答案(1)|浏览(94)
I required stacked bar chart as below:

我的stackblitz链接:stackblitz
在这个参考代码中,我想存档左端部分边界半径。
图例还显示了条形图的每个块及其位置“顶部”。

41zrol4v

41zrol4v1#

对于边界半径,如文档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},
  },
],

对于图例,你不能像图中所示的那样开箱即用。可能你需要一个插件。

相关问题