chart.js动态调整垂直条之间的间隙

Question

我正在开发一个根据发票处理项目显示仪表板的网页。

使用下面的代码，我正在填充条形图。

function loadVolumeChart()
{
  var pieChartContent = document.getElementById('chartAreaWrapper');
  pieChartContent.innerHTML = '';
  $('#chartAreaWrapper').append('<canvas id="line-chart" height="300" width="1500px"><canvas>');   
  //getData For Volume Analysis Chary    
  var url_string = document.referrer;;
  var url = new URL(url_string);
  var name = url.searchParams.get("name");
  var user=url.searchParams.get("user");
  var team=url.searchParams.get("team");
  var date=url.searchParams.get("date");
  var dates = [];
  var count = [];

  var from = date.split("-")[0];
  var to = date.split("-")[1];
  var re=$.ajax({
    url: 'getTotalCounts.php',
    type: 'POST',
    data: {
        from:from,
        to:to,
        team:team,
        totalVolume: '00'
    },
    async:false,
    success: function(data) {
      var result =data;
      var json = JSON.parse(result);
      dates=json[0].data;//json[0].data;
      count=json[1].data;
      //alert(dates);
    }
    }).done(function(data){
      // openPage(data);
    }).fail(function(data){
      alert(data.responseText);
    });
    //volume chart
   new Chart(document.getElementById("line-chart"), {
  type: 'bar', //line
  data: {
  labels:dates,
  datasets: [{ 
  data:count,
    label: "Total Inward",
    backgroundColor: "#0E6655", //borderColor
    fill: true
  },
]
  },

  options: {

  responsive:false,
  maintainAspectRatio: true,
  legend: {
        display: false
     },
     tooltips: {
        enabled: true
     },
     scales: {
    xAxes: [{
        gridLines: {
            display:false
        },
        barThickness: 15,

    }],
    yAxes: [{
      barPercentage: 1.0,
categoryPercentage: 1.0,
        gridLines: {
            display:false
        },
        ticks: {
            min: 0,
            max:10,
            stepSize: 1
            }   
    }]
},
  }
});
//end of volume chart
     }

但是问题是，当数据不足时，这意味着如果x轴数据仅包含2个日期，则两个小节之间的间隙太大，如下图所示，

但是如果我添加更多日期，则差距会减小。我想设置两个小节之间的差距，即使它们只是两个小节。如果日期（条）根据x轴数据的大小，则两者之间的距离不应增加。如果数据很大，则只能滚动。那就是为什么我添加了滚动条。

图表的div为：

 <div class="parentDiv" >
     <div class="chartAreaWrapper" id="chartAreaWrapper" style="height:80%;width:70%;margin-left: 20px; margin-top: 10px;float: left;">
     <canvas id="line-chart" height="300" width="1500px"></canvas>
     </div>
  </div>

Answer 1

在您的代码中，选项xAxis.barThickness定义单个条的宽度必须为15像素。只需删除此选项。

您还应该考虑使用不推荐使用xAxis.barThickness选项的Chart.js最新稳定版本（当前为v2.9.3）。选项barThickness，barPercentage和categoryPercentage现在是dataset configuration的一部分。