Chartjs -如何在堆叠条之间添加边距/填充

6qftjkof  于 2023-04-30  发布在  Chart.js
关注(0)|答案(1)|浏览(170)

在Chartjs中,可以堆叠条形图。是否可以在元素之间添加边距或填充?请参见屏幕截图中的红色箭头,以获取在渲染值之间创建空间的所需区域。
示例摘自文档here
配置:

const config = {
  type: 'bar',
  data: data,
  options: {
    responsive: true,
    plugins: {
      legend: {
        position: 'top',
      },
      title: {
        display: true,
        text: 'Chart.js Bar Chart'
      }
    },
    scales: {
      x: {
        stacked: true,
      },
      y: {
        stacked: true
      }
    }
  },
};

设置:

const DATA_COUNT = 7;
const NUMBER_CFG = {count: DATA_COUNT, min: -100, max: 100};

const labels = Utils.months({count: 7});
const data = {
  labels: labels,
  datasets: [
    {
      label: 'One Value',
      data: Utils.numbers(NUMBER_CFG),
      borderColor: Utils.CHART_COLORS.red,
      backgroundColor: Utils.transparentize(Utils.CHART_COLORS.red, 0.5),
      borderWidth: 2,
      borderRadius: 16,
      borderSkipped: false,
    },
    {
      label: 'Another Value',
      data: Utils.numbers(NUMBER_CFG),
      borderColor: Utils.CHART_COLORS.blue,
      backgroundColor: Utils.transparentize(Utils.CHART_COLORS.blue, 0.5),
      borderWidth: 2,
      borderRadius: 16,
      borderSkipped: false,
    },
        {
      label: 'Yet Another Value',
      data: Utils.numbers(NUMBER_CFG),
      borderColor: Utils.CHART_COLORS.blue,
      backgroundColor: Utils.transparentize(Utils.CHART_COLORS.blue, 0.5),
      borderWidth: 2,
      borderRadius: 16,
      borderSkipped: false,
    }
  ]
};

zvokhttg

zvokhttg1#

不,这是不可能的,但你可以做的是添加另一个数据集,坐在两个数据集之间,你使背景和bordercolor的酒吧透明

相关问题