我使用ChartJS在一个页面上显示多个图表。每个图表都有不同的数据集和不同的标签（有些是短标签，有些是长标签）。
当前实际“数据部分”的宽度（图表的一部分，显示例如条）取决于标签占用的空间。我想让所有图表的数据部分都有一个固定的大小，让标签占据剩余的大小。
例如，请参见下面的屏幕截图。这里我显示了两个图表，但实际的数据部分是不同的，因为一个比另一个有更短的标签。
我想要的是为数据部分设置例如400px的固定宽度，并让标签占用页面上剩余的空间。这样，图表将完美地排列在彼此之上。
更好的是，如果我可以为每个图表设置数据部分占宽度的百分比（例如，70%），所以标签拿走了剩下的（30%）。
我已经检查了ChartJS文档，但我只能找到它设置整个图表组件的宽度。
2条答案
按热度按时间0mkxixxg1#
厚脸皮的解决方案-您可以添加一个虚拟图表之前，您的图表具有相同的标签。
让我们把这个虚拟图表称为图表D，把你的主图表称为图表M。在M中，你可以固定它的宽度，并通过写入选项来隐藏标签-
scales: {y: {ticks: {display: false}}}现在你有一个固定的数据宽度。
在D中，您只需显示标签并隐藏数据部分（隐藏网格线，图例，标题等）。
所以现在你有两个并排的图表，一个只显示标签，另一个显示条形图，只需要将其定位，无论标签有多长，它都不会与M重叠。
对所有图表重复此步骤，并对M1、M2、M3、.
这是一个似乎对我有效的解决方案。
vyu0f0g12#
一个选项是为所有图表的y轴刻度设置一个较大的固定宽度。
这是通过将回调附加到y轴的afterFit事件并使用一个较大的固定数字覆盖计算的宽度来完成的。
使用前：
之后：