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 像素。只需删除此选项即可。

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