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
  }
]

Chartjs Barchart无国界

1 个答案: