在柱之间添加 spaces/margin - Chart.js

Question

如何使用 Chart.js 3.0 在条形之间添加白色 spaces/margin？我没有找到任何像图片那样需要处理的东西

What I want

我的代码如下所示： What I have

datasets: [{
                categoryPercentage: 1.0,
                barPercentage: 0.8,
            }]
        },
    options: {
            onHover() {},
            indexAxis: 'y',
            maintainAspectRatio: false,
     }

完整代码在这里：https://codepen.io/mateofaivre/pen/zYdYgmB

Answer 1

如果减小条形尺寸不是问题，您可以将 barPercentage 添加到您的选项中。

像这样：

const config = {
  type: 'bar',
  data,
  options: {
    indexAxis: 'y',
    barPercentage: 0.8
  }
};

Bar Chart | Charts.js

Answer 2

您应该将 categoryPercentage 设置为较低的值，例如 0.8，将 barPercentage 设置为 1。

关于 categoryPercentage 与 barPercentage 的图形信息：

// categoryPercentage: 1.0
// barPercentage: 1.0
Bar:        | 1.0 | 1.0 |
Category:   |    1.0    |
Sample:     |===========|

// categoryPercentage: 1.0
// barPercentage: 0.5
Bar:          |.5|  |.5|
Category:  |      1.0     |
Sample:    |==============|

// categoryPercentage: 0.5
// barPercentage: 1.0
Bar:             |1.0||1.0|
Category:        |   .5   |
Sample:     |==================|

编辑：

您可以从图表的元集中获取条形宽度并使用它在图表上绘制，如下所示：

const plugin = {
  id: 'background',
  beforeDraw: (chart, args, opts) => {
    if (!opts.color) {
      return;
    }

    const {
      ctx,
      chartArea,
      _metasets
    } = chart;

    ctx.fillStyle = opts.color;

    _metasets.forEach(meta => {
      meta.data.forEach(data => {
        if (data.horizontal) {
          ctx.fillRect(chartArea.left, (data.y - (data.height / 2)), chartArea.width, data.height)
        } else {
          ctx.fillRect((data.x - (data.width / 2)), chartArea.top, data.width, chartArea.height)
        }
      })
    });
  }
}

Chart.register(plugin);

var colors = [];
for (var i = 0; i < 5; i++) {
  colors.push('#5671DB');
}
var config = {
  type: 'bar',
  data: {
    labels: ['Commerce, vente', 'Transport', 'Bureautique', 'Accueil', 'Santé', 'Secrétariat', 'Nettoyage', 'Sécurité', 'Mécanique', 'Agro-alimentaire'],
    datasets: [{
      data: [23.8, 17.7, 13, 9.5, 7.8, 7, 5.5, 5, 4.5, 3.5],
      backgroundColor: colors,
      hoverBackgroundColor: colors,
      borderColor: colors,
    }],
  },
  options: {
    onHover() {},
    indexAxis: 'y',
    barPercentage: 0.8,
    //barThickness: 60,
    // maxBarThickness: 60,
    categoryPercentage: 1.0,
    maintainAspectRatio: true,
    responsive: true,
    plugins: {
      background: {
        color: '#CDECEF'
      },
      title: {
        display: false,
        text: "Les 10 principaux domaines d'emploi",
        align: 'start',
        fullSize: true,
        color: '#324488',
        font: {
          size: 24,
          family: 'Arial',
        }
      },
      legend: {
        display: false
      },
      tooltip: {
        backgroundColor: 'rgba(255,255,255,0)',
        displayColors: false,
        titleFont: {
          size: 0,
        },
        titleMarginBottom: 0,
        titleSpacing: 0,
        bodyFont: {
          size: 25,
          weight: 700
        },
        xAlign: 'right',
        callbacks: {
          label: (item) => (`${item.parsed.x} %`),
        },
      },
    },
    scales: {
      y: {
        beginAtZero: true,
        ticks: {
          color: "#34478B",
          font: {
            size: 18,
          },
          stepSize: 1,
          beginAtZero: true
        },
      },
      x: {
        ticks: {
          color: "#25C8C9",
          font: {
            size: 14
          },
          stepSize: 1,
          beginAtZero: true
        },

      }
    }
  },
};


var ctx = document.getElementById('myChart').getContext('2d');
new Chart(ctx, config);

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<canvas id="myChart"></canvas>

codePen

在柱之间添加 spaces/margin - Chart.js

Add spaces/margin between bars - Chart.js

javascript

charts

frontend

bar-chart

chart.js