在chart.js中隔开堆叠条形

bkkx9g8r  于 2022-11-06  发布在  Chart.js
关注(0)|答案(2)|浏览(202)

我尝试在Chart.js中使用JS、CSS和HTML制作一个只有一个条形的堆叠条形图。这是我到目前为止构建的图表:

我试着让它看起来像下面这样:

我不知道如何或是否有可能在Chart.js中像我上面所做的那样将条形分隔开,并在图表下面添加括号标签。TYIA
第一个

slmsl1lt

slmsl1lt1#

关于在栏之间添加空格,我也找不到任何允许这种行为的直接配置。
我的第一个想法是添加边框并使其不可见,但是您不会看到borderRadius的效果。
然后,我提出了另一种方法,即在数据集对象中插入一个透明颜色的“假”数据,它具有可定制的长度作为差距。使用flatMap,您可以构建这样的交错数组。
此外,将所有内容都放在外部对象中,可以避免冗余代码。

datasets: {
      bar: {
        barThickness: 50,
        borderSkipped: false,
        borderRadius: {
          topLeft: 3,
          topRight: 3,
          bottomLeft: 3,
          bottomRight: 3
        }
      }
    },

对应于:
第一个
关于分组标签与括号,我不知道这是可能的,没有插件或更花哨的东西。

idfiyjo8

idfiyjo82#

上面的答案是我的问题的正确解决方案,但这个答案已经被贴出来了。我想出了一个不同的方法来做它。我在每个彩色条之间做了0.01大小的条,并使颜色与我正在工作的网页的背景相同。这也解决了我的问题。

相关问题