Javascript 使用chart.js创建条形图，其中每个条形图的空间相同，整体图表大小已调整

下面是我的Javascript选项和两个屏幕截图，显示了我创建的图表示例。条形图的宽度设置为50像素。但图表的整体大小是相同的，即使一个图表有两个条形图，另一个有五个条形图。这意味着有五个条的图表比有两个条的图表压缩得更紧，即使实际的条都是50像素。我希望这两个图表之间有更多的一致性，因此只有两条横线的图表整体上会“更短”，间距与五条横线的图表相匹配。这在chart.js中可能吗

options: {
    aspectRatio: 3,
    legend: {
        display: false
    },
    scales: {
        xAxes: [{
            barThickness: 50,
            ticks: {
                beginAtZero: true,
                suggestedMax: maxAxisX
            }
        }],
        yAxes: [{
            maxBarThickness: 50,
            ticks: {
                beginAtZero: true
            }
        }]
    }
}

提供了一系列钩子，可用于执行自定义代码。您可以使用

beforeRender

钩子来定义

canvas

parent

div

的高度，具体取决于图表中包含的条数。这个函数还必须考虑图表顶部和下方所需的空间，特别是绘制xx-Tigs。

plugins: [{
  beforeRender: chart => {
    if (!chart.config.options.nonChartAreaHeight) {
      var yAxis = chart.scales['y-axis-0'];
      chart.config.options.nonChartAreaHeight = chart.chart.height - (yAxis.bottom - yAxis.top);
    }
    const barThickness = chart.config.data.datasets[0].barThickness;
    const chartAreaHeight = (chart.config.data.labels.length * barThickness * 2);
    document.getElementById("chartWrapper").style.height = (chartAreaHeight + chart.config.options.nonChartAreaHeight) + 'px';
  }
}],

请注意，我们不需要定义选项

aspectRatio

，而是需要定义

maintaintaspectratio:false

请看下面生成两个图表的代码示例。此解决方案使用最新稳定版本的Chart.js（2.9.3）

新图表（“myChart”{
键入：“水平线”，
插件：[{
beforeRender:图表=>{
如果（！chart.config.options.nonChartAreaHeight）{
var yAxis=图表刻度['y轴-0']；
chart.config.options.nonchartraeaheight=chart.chart.height-（yAxis.bottom-yAxis.top）；
}
const barThickness=chart.config.data.datasets[0].barThickness；
const chartAreaHeight=（chart.config.data.labels.length*barThickness*2）；
document.getElementById（“chartWrapper”）.style.height=（chartAreaHeight+chart.config.options.nonChartAreaHeight）+“px”；
}
}],
数据：{
标签：['1'，'2'，'3'，'4']，
数据集：[{
巴特希克内斯：20岁，
数据：[100,90,80,70]
}]
},
选项：{
MaintaintAspectRatio:false，
图例：{
显示：假
},
比例：{
xAxes：[{
滴答声：{
贝吉纳泽罗：是的
}
}]
}
}
});
div{
宽度：100%；
}

提供了一系列钩子，可用于执行自定义代码。您可以使用
beforeRender
钩子来定义
canvas
parent
div
的高度，具体取决于图表中包含的条数。这个函数还必须考虑图表顶部和下方所需的空间，特别是绘制xx-Tigs。

plugins: [{
  beforeRender: chart => {
    if (!chart.config.options.nonChartAreaHeight) {
      var yAxis = chart.scales['y-axis-0'];
      chart.config.options.nonChartAreaHeight = chart.chart.height - (yAxis.bottom - yAxis.top);
    }
    const barThickness = chart.config.data.datasets[0].barThickness;
    const chartAreaHeight = (chart.config.data.labels.length * barThickness * 2);
    document.getElementById("chartWrapper").style.height = (chartAreaHeight + chart.config.options.nonChartAreaHeight) + 'px';
  }
}],

请注意，我们不需要定义选项
aspectRatio
，而是需要定义
maintaintaspectratio:false

请看下面生成两个图表的代码示例。此解决方案使用最新稳定版本的Chart.js（2.9.3）


新图表（“myChart”{
键入：“水平线”，
插件：[{
beforeRender:图表=>{
如果（！chart.config.options.nonChartAreaHeight）{
var yAxis=图表刻度['y轴-0']；
chart.config.options.nonchartraeaheight=chart.chart.height-（yAxis.bottom-yAxis.top）；
}
const barThickness=chart.config.data.datasets[0].barThickness；
const chartAreaHeight=（chart.config.data.labels.length*barThickness*2）；
document.getElementById（“chartWrapper”）.style.height=（chartAreaHeight+chart.config.options.nonChartAreaHeight）+“px”；
}
}],
数据：{
标签：['1'，'2'，'3'，'4']，
数据集：[{
巴特希克内斯：20岁，
数据：[100,90,80,70]
}]
},
选项：{
MaintaintAspectRatio:false，
图例：{
显示：假
},
比例：{
xAxes：[{
滴答声：{
贝吉纳泽罗：是的
}
}]
}
}
});
div{
宽度：100%；
}

您可以根据数据行的数量调整画布的高度……是的，我想我已经想到了。我希望可能有一个背景，但可能没有运气。因此，在Javascript中构建图表时，计算数据行的数量，并在此基础上插入CSS样式？如果我仅通过CSS调整高度，则会使图表失真。如果我通过CSS按比例调整高度和宽度，我的图表之间的字体大小都不同。如果在绘制图表之前调整高度，则会发生扭曲？将数据保存在变量中，然后使用变量设置高度，然后将数据变量传给图表并绘制--例如--
数据集：数据，
您可以根据数据行的数量调整画布的高度……是的，我想我已经想到了。我希望可能有一个背景，但可能没有运气。因此，在Javascript中构建图表时，计算数据行的数量，并在此基础上插入CSS样式？如果我仅通过CSS调整高度，则会使图表失真。如果我通过CSS按比例调整高度和宽度，我的图表之间的字体大小都不同。如果在绘制图表之前调整高度，则会扭曲？将数据保存在变量中，然后使用变量设置高度，然后将数据变量传给图表并绘制--例如--
数据集：数据，