Chart.js 在条形图中的列之间添加空格。chartjs

我正在使用图表JSV2.9.3创建图形。 当我用少量数据创建图表时，它会完美地呈现数据，但当数据量增加时，图表会变得拥挤

图形在单个标签中有两列

如果没有旋转，我也无法设置标签

var config = {
    type: 'bar',
    data: {
      labels: _datesForLabel,
      datasets: _chartDataWithOptions,          
    },
    options: {
      tooltips: {
      },
      plugins: {
        colorschemes: {
          scheme: 'office.Waveform6'
        }
      },
      scales: {
        yAxes: [{
          ticks: {
            min: 0,
          }
        }],
        xAxes: [{
          barThickness: 40, 
          maxBarThickness: 40,
          barPercentage: 1.0,
          categoryPercentage: 1.0,
          ticks: {
            min: 0,
          },
        }]
      }
    }
  };

  myBarChart = new Chart(ctx, config);

这些是我使用的选项。 给出了输出的屏幕截图

有人能帮我吗。

---

谢谢

删除此

barThickness:40，

（40在像素中）。在您的情况下，“没有空间/房间”的宽度=重叠和破损布局

基本代码段（基于您的代码）（更改

barThickness

barPercentage

barPercentage

）：

var canvas=document.getElementById（“myChart”）；
var ctx=canvas.getContext（“2d”）；
var_datesForLabel=[“2020-02-10”，
"2020-02-13",
"2020-02-17",
"2020-02-18",
"2020-02-19",
"2020-02-20",
"2020-02-21",
"2020-02-22",
"2020-02-23",
"2020-02-24",
"2020-02-25",
"2020-02-26",
"2020-02-27",
"2020-02-28",
"2020-02-29",
"2020-03-01",
"2020-03-02",
"2020-03-03",
"2020-03-04",
"2020-03-05",
"2020-03-07",
"2020-03-08",
"2020-03-09",
"2020-03-10","2020-02-10",
"2020-02-13",
"2020-02-17",
"2020-02-18",
"2020-02-19",
"2020-02-20",
"2020-02-21",
"2020-02-22",
"2020-02-23",
"2020-02-24",
"2020-02-25",
"2020-02-26",
"2020-02-27",
"2020-02-28",
"2020-02-29",
"2020-03-01",
"2020-03-02",
"2020-03-03",
"2020-03-04",
"2020-03-05",
"2020-03-07",
"2020-03-08",
"2020-03-09",
"2020-03-10"]      
var_chartDataWithOptions=[]；
_chartDataWithOptions.push({
标签：“数据体验1”，
数据：[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,1,2,3,4,5,6,7,8,9,10,11,12,13,15,18,19,20,22,24,24,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24]，
背景颜色：“蓝色”
})
_chartDataWithOptions.push({
标签：“数据体验2”，
数据：[2,3,4,5,6,7,8,9,10,12,13,11,10,19,14,12,11,18,26,23,21,28,24,2,3,4,6,9,1,2,1,11,12,13,14,15,16,17,18,19,21,22,22,4,3,6]，
背景颜色：“红色”
})
变量配置={
类型：'bar'，
数据：{
标签：_日期标签，
数据集：_chartDataWithOptions，
跳过的边框：“顶部”
},
选项：{
//回答：是的，
工具提示：{
//模式：“”
},
插件：{
配色方案：{
方案：“office.Waveform6”
}
},
比例：{
雅克斯：[{
滴答声：{
分:0,，
}
}],
xAxes：[{
//barThickness:40，//数字（像素）或“flex”
马克斯巴希克内斯：40，
barPercentage:1，/*更改此设置*/
categoryPercentage:0.5，/*更改此值*/
滴答声：{
分:0,，
},
}]
}
}
};
myBarChart=新图表（ctx，配置）

请添加最小重复性示例：抱歉，没有写出正确的问题。为此，请创建一个CodePan链接，以便每个人都能理解完整的图片。感谢您的回复。我必须按照你的建议去做，但没有找到一个精确的条形图工作模型。我发现plugin chartjs plugin downsample示例：但这不适用于柱状图。谢谢。请问有没有其他方法来美化这个图表，或者我在上面的建议中忘记了什么。再次添加数据示例（代码片段）。还有一个想法是这个插件（缩放）：。我编辑了答案（空格）。谢谢你的回复。我检查了你的建议链接，我们应该使用它。但是这里的替代解决方案没有任何插件。我添加的宽度越大，空间就越大，在本例中还添加了一个滚动条。我找到了这个谢谢