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

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

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

options: {
      responsive: true,
      lineTension: 1,
      plugins: {
        legend: {
          position: 'bottom',
          // prevent filtering using labels
          'onClick' : function (evt, item, legend) {
            return;
          },
          labels: {
            usePointStyle: 'circle',
          },
        }
      },
      elements: {
        bar: {
          borderRadius: {
            topLeft: 4.6,
            topRight: 4.6,
          },
        }
      },
      scales: {
        y: {
          stacked: true,
          ticks: {
            maxTicksLimit: 6,
            callback: function(value, index, ticks) {
              return value + ' min';
            }
          },

        },
        x: {
          stacked: true,
          grid: {
            color: "rgba(0, 0, 0, 0)",
          }
        }
      }
    }
guicsvcw

guicsvcw1#

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

相关问题