我尝试在Chart.js中使用JS、CSS和HTML制作一个只有一个条形的堆叠条形图。这是我到目前为止构建的图表:
我试着让它看起来像下面这样:
我不知道如何或是否有可能在Chart.js中像我上面所做的那样将条形分隔开,并在图表下面添加括号标签。TYIA第一个
slmsl1lt1#
关于在栏之间添加空格,我也找不到任何允许这种行为的直接配置。我的第一个想法是添加边框并使其不可见,但是您不会看到borderRadius的效果。然后,我提出了另一种方法,即在数据集对象中插入一个透明颜色的“假”数据,它具有可定制的长度作为差距。使用flatMap,您可以构建这样的交错数组。此外,将所有内容都放在外部对象中,可以避免冗余代码。
borderRadius
flatMap
datasets: { bar: { barThickness: 50, borderSkipped: false, borderRadius: { topLeft: 3, topRight: 3, bottomLeft: 3, bottomRight: 3 } } },
对应于:第一个关于分组标签与括号,我不知道这是可能的,没有插件或更花哨的东西。
idfiyjo82#
上面的答案是我的问题的正确解决方案,但这个答案已经被贴出来了。我想出了一个不同的方法来做它。我在每个彩色条之间做了0.01大小的条,并使颜色与我正在工作的网页的背景相同。这也解决了我的问题。
2条答案
按热度按时间slmsl1lt1#
关于在栏之间添加空格,我也找不到任何允许这种行为的直接配置。
我的第一个想法是添加边框并使其不可见,但是您不会看到
borderRadius
的效果。然后,我提出了另一种方法,即在数据集对象中插入一个透明颜色的“假”数据,它具有可定制的长度作为差距。使用
flatMap
,您可以构建这样的交错数组。此外,将所有内容都放在外部对象中,可以避免冗余代码。
对应于:
第一个
关于分组标签与括号,我不知道这是可能的,没有插件或更花哨的东西。
idfiyjo82#
上面的答案是我的问题的正确解决方案,但这个答案已经被贴出来了。我想出了一个不同的方法来做它。我在每个彩色条之间做了0.01大小的条,并使颜色与我正在工作的网页的背景相同。这也解决了我的问题。