javascript - Chartjs 无边框条形图

Question

我正在尝试使用 Chartjs 构建一个条形图，其中相邻条形之间不应有空格。我遇到的问题是我没有摆脱栏之间的边界: Bars with borders

这是我的配置:

new Chart($('#weekly-availabilities-chart'), {
  type: 'bar',
  data: {
  labels: ...,
  datasets: [
    {
      backgroundColor: 'rgba(153, 193, 72, 0.4)',
      label: 'label a',
      borderWidth: 0,
      data: dataset_1
    }, {
      backgroundColor: 'rgba(13, 39, 73, 0.4)',
      label: 'label b',
      borderWidth: 0,
      data: dataset_2
    }
  ]
},
  options: {
  scales: {
    xAxes: [
      {
        barPercentage: 1,
        categoryPercentage: 1,
        gridLines: {
          display: false
        }
      }
    ],
    yAxes: [
      {
        stacked: true,
        gridLines: {
          color: 'rgba(0,0,0,0.05)'
        },
        ticks: {
          beginAtZero: true,
          max: 40
        }
      }
    ]
  }
}
});

Answer 1

使用borderWidth: 0在你的数据集中。

datasets: [
  {
    backgroundColor: 'rgba(153, 193, 72, 0.4)',
    label: 'label a',
    data: dataset_1,
    borderWidth: 0
  }, {
    backgroundColor: 'rgba(13, 39, 73, 0.4)',
    label: 'label b',
    data: dataset_2,
    borderWidth: 0
  }
]