填充chart.js中堆积条形之间的间隙答案

【问题标题】：Fill gap between stacked bars in chart.js填充chart.js中堆积条形之间的间隙
【发布时间】：2022-08-18 18:02:17
【问题描述】：

我目前正在使用带有 Vue 2 的 chart.js，并且在使用带有堆叠条的边框半径时遇到了问题。我想要一个边界顶部半径，但是这样做时，我在创建的边界和上面的条之间得到一个“间隙”。

有什么选择可以填补这个空白吗？

这些是我用于图表的当前选项。

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)\",
          }
        }
      }
    }

标签： chart.js

【解决方案1】：

您需要的不是任何选项都可以配置的。不过，您可以使用插件来更改要绘制的栏的底部，同时注意边框半径。

编辑：我在 bar 元素中找到了一个特定选项 base，它应该解决用例。

见sn-p：

const ctx = document.getElementById("myChart");
// not used but leave it
const plugin = {
  id: 'fillGaps',
  beforeDatasetDraw(chart, args) {
    if (args.index > 0) {
      args.meta.data.forEach(function(item){
        const pre = item.base;
        item.base += 12;
      });
    }
  },
};
//
const myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['January', 'Fabruary', 'March', 'April', 'May', 'June', 'July'],
        datasets: [{
            label: 'user 1 online',
            data: [50, 35, 45, 47, 10, 3, 27],
            backgroundColor: 'rgba(40, 139, 170, 1)',
            borderWidth: 0,
            borderSkipped: 'start',
            base: 0
        },
        {
            label: 'user 2 online',
            data: [50, 35, 45, 47, 10, 3, 27],
            backgroundColor: 'orange',
            borderWidth: 0,
            borderSkipped: 'start',
            base: 0
        }]
    },
    options: {
      elements: {
        bar: {
          borderRadius: {
            topLeft: 12,
            topRight: 12,
            bottomLeft: 12, 
            bottomRight: 12
          },
        }
      },
      scales: {
        y: {
          stacked: true,
        },
        x: {
          stacked: true,
        }
      }
    }
});

.myChartDiv {
  max-width: 600px;
  max-height: 400px;
}

<script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
<html>
  <body>
    <div class="myChartDiv">
      <canvas id="myChart" width="600" height="400"/>
    </div>
  </body>
</html>

【讨论】：

看看更新的答案。您也可以使用“基础”选项而不是插件。