如何在图表JS中使酒吧破灭？

Question

大家好，我是新来的图表JS，我需要使酒吧破灭。我使用版本 - “ Chart.js”：“^3.7.0”，

我需要我的条形，我的条形看起来像此图像

Answer 1

您可以通过扩展Chart.barcontroller来创建自定义图表类型图表类型“ rel =” nofollow noreferrer”>在这里。

请查看以下可运行的代码，然后查看其工作原理。

class DashedBorderBar extends Chart.BarController {
  draw() {
    super.draw(arguments);
    const ctx = this.chart.ctx;
    ctx.save();
    const dataset = this.chart.data.datasets[0];
    ctx.strokeStyle = dataset.dashedBorderColor;
    ctx.lineWidth = dataset.dashedBorderWidth;
    ctx.setLineDash(dataset.borderDash);    
    this.getMeta().data.forEach(d => {      
      ctx.strokeRect(d.x - d.width / 2, d.y, d.width, d.height + ctx.lineWidth);
    });
    ctx.restore();
  }
};
DashedBorderBar.id = 'dashedBorderBar';
DashedBorderBar.defaults = DashedBorderBar.defaults;
Chart.register(DashedBorderBar);

new Chart('myChart', {
  type: 'dashedBorderBar',
  data: {
    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
    datasets: [{
      label: 'Dataset',
      backgroundColor: 'rgba(255, 99, 132, 0.2)',
      data: [65, 59, 80, 81, 56, 45, 40],
      dashedBorderColor: 'blue',
      dashedBorderWidth: 3,
      borderDash: [10, 5]
    }]
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.8.0/chart.min.js"></script>
<canvas id="myChart" height="120"></canvas>