高图表条形图布局问题

highcharts bar graph layout issues

本文关键字：问题 布局 条形图 高图表      更新时间：2023-09-26

我正在尝试创建一个高图表（条形图），其数据集非常大，不是很大，而是 40 个左右不同的柱线。不过，我的布局有问题，首先并非所有标签都输出在 y 轴上，但是工具提示与 Y 轴标签不匹配。

我创造了一个小提琴，

https://jsfiddle.net/e8bfxh8a/

如果有人能告诉我是什么导致了非常棒的布局问题，我尝试在绘图选项中添加填充和宽度，如下所示，

plotOptions: { series: { pointPadding: 0.2, groupPadding: 1, } },

使图表的高度动态化，使其有空间显示所有标签。 

var rowHeight = 24;
var chartOptions = {
         chart: {
                type: 'bar',
                height: data.length * rowHeight

我刚刚添加了那个 var，这样你就可以有一个常量来玩。data.length 只是获取数据数组的大小，并从中得出高度。这里有一个类似的问题，还有其他一些想法。

如果将pointPadding和groupPadding设置为0，条形图将更加紧密。

有

太多的类别无法在不重叠的情况下显示，因此您可以启用缩放，以便能够放大到所选区域以查看更多详细信息，就像所有类别一样（ = 轴标签）。

示例：https://jsfiddle.net/400jmd3u/

如果您想查看所有类别（没有缩放）的外观，则可以使用此小提琴：https://jsfiddle.net/34pw12r8/（通过xAxis labels : {step: 1}设置）

相关文章：