填充chart.js中堆叠条形之间的间隙

g9icjywg  于 2022-11-06  发布在  Chart.js
关注(0)|答案(1)|浏览(231)

我目前在Vue 2中使用chart.js,在使用堆叠条形的border-radius时遇到了一个问题。我想有一个border-top radius,但这样做时,在创建的边框和上面的条形之间会有一个“间隙”。
有没有什么办法可以填补这一空白?
Current behaviour
Expected behaviour
这些是我用于图形的当前选项。

  1. options: {
  2. responsive: true,
  3. lineTension: 1,
  4. plugins: {
  5. legend: {
  6. position: 'bottom',
  7. // prevent filtering using labels
  8. 'onClick' : function (evt, item, legend) {
  9. return;
  10. },
  11. labels: {
  12. usePointStyle: 'circle',
  13. },
  14. }
  15. },
  16. elements: {
  17. bar: {
  18. borderRadius: {
  19. topLeft: 4.6,
  20. topRight: 4.6,
  21. },
  22. }
  23. },
  24. scales: {
  25. y: {
  26. stacked: true,
  27. ticks: {
  28. maxTicksLimit: 6,
  29. callback: function(value, index, ticks) {
  30. return value + ' min';
  31. }
  32. },
  33. },
  34. x: {
  35. stacked: true,
  36. grid: {
  37. color: "rgba(0, 0, 0, 0)",
  38. }
  39. }
  40. }
  41. }
guicsvcw

guicsvcw1#

你所需要的是不可配置的任何选项。不过,你可以使用一个插件来改变基地的酒吧绘制,照顾到边界半径。
编辑:我在bar元素base中找到了一个特定的选项,它应该可以解决这个用例。
请参阅片段:
第一个

相关问题