Highcharts问题-在可缩放图表中显示标签

我有一个缩放柱形图，在xAxis中有200多个类别。因此，当它处于初始状态（比例1:1）时，所有这些家伙都显示在X轴下，即使我垂直放置它们，也无法读取任何内容。我需要缩放图表以使标签可见

以下是问题的屏幕截图：

这是我的密码：

是否可以根据缩放级别调整标签的浓度（可能会自动更改步长）

我非常感谢你的帮助

谢谢，

---

Andrzej

按照从最简单到最困难的顺序

由于您的类别大多是数字的（例如“mir001”），您可以省略这些类别，这将阻止它们全部显示。然后显示1、2、3等等

或者，您可以删除类别并使用。在这种情况下，您可以这样做，再次利用标签显示为数字且递增的事实：

chart = new Highcharts.Chart({
    xaxis: {
        labels: {
            formatter: function() {
                return "mir" + this.value;
            }
        }
    }
});

以上两种方法都会减少标签的数量（标签将遵循一些模式，例如1、50、100，直到缩放）

如果您想对标签非常挑剔，则必须使用标签格式化程序并进行一些数学运算，以找到图形的比例，从而确定标签应如何显示。例如，你可以做这样的事情，尽管这很复杂：

var categories = [] //have your categories as a separate list
var buckets = 4; 
var labelFormatter = function(frequency) {
    var count = 0;
    frequency = frequency || 0;
    return function () {
        count++;
        if ((count > frequency) || (frequency < 1)) {
                return this.value
        }
    }
};

chart = new Highcharts.Chart({
    zoomtype: 'x',
    events: {
        selection: function(event) {
            if (event.xAxis) {
                var scale = event.xAxis[0];
                var frequency = Math.floor((scale.max - scale.min) / buckets)
                this.xaxis[0].labels.formatter = labelFormatter(frequency);
            }
        }
    },
    xaxis: {
        labels: {
            formatter: labelFormatter(Math.floor(categories.length/buckets))
        }
    }
});

var categories=[]//将您的类别作为一个单独的列表
var=4；
var labelFormatter=功能（频率）{
var计数=0；
频率=频率| | 0；
返回函数（）{
计数++；
如果（（计数>频率）| |（频率<1））{
返回此.value
}
}
};
图表=新的高点图表。图表({
zoomtype:'x'，
活动：{
选择：功能（事件）{
if（event.xAxis）{
var scale=event.xAxis[0]；
变量频率=数学地板（（scale.max-scale.min）/桶）
this.xaxis[0].labels.formatter=labelFormatter（频率）；
}
}
},
xaxis：{
标签：{
格式化程序：labelFormatter（数学层（类别、长度/桶））
}
}
});

我应该指出，最后一个解决方案并不完全有效，进一步说明它有多困难。

我的解决方案：

xAxis:
{
    categories: [ <!-- your categories -->],
    tickInterval: 5,        // Cada 5 valores muestra valor (five jump interval)
    labels:
    {
        rotation: -35,
        style:
        {
            font: 'normal 12px Verdana, sans-serif'
        }
    }
},

xAxis:
{
类别：[]，
滴答声间隔：5，//Cada 5 valores muestra valor（五跳间隔）
标签：
{
轮调：-35，
风格：
{
字体：“普通12px Verdana，无衬线”
}
}
},

对于最初的问题来说可能有点太晚了，但我正在开发一些具有Highcharts的东西，我正是在寻找这个

我是这样做的，以供将来参考：

xAxis: {
    labels: {
        step: 5
    },
    events: {
        setExtremes: function(event) {
            if (event.max) {
                var frequency = Math.floor((event.max - event.min) / 17);
                this.options.labels.step = frequency;
            } else {
                this.options.labels.step = 5;
            }
        }
    }
},

---

它基本上检查我们是否正在缩放-

if（event.max）

-或重置。17是我缩小时得到的标签数量，标签步骤设置为5，并且使用这个特定的数据集（我非常确定这可能会更加完美，但它可以工作）

我就是这样解决这个问题的：

xAxis: {
   tickPositioner: function () {
      var positions = [],
          min = Math.floor(this.min),
          max = Math.ceil(this.max),
          tick = min,
          increment = Math.ceil((max - min) / 30);

      for (; tick < max; tick += increment) {
         positions.push(tick);
      }
      positions.push(max);
      return positions;
   }
}

xAxis:{
定位器：功能（）{
var头寸=[]，
min=数学楼层（this.min），
max=Math.ceil（this.max），
刻度=分钟，
增量=数学单元（（最大-最小）/30）；
对于（；刻度<最大值；刻度+=增量）{
位置。推（勾选）；
}
位置。推（最大）；
返回位置；
}
}

---

重新绘制时调用定位器。最小值和最大值包含最左侧和最右侧（x轴）的包含值。

非常感谢NT3RP的快速回复。理想情况下，我梦见下面的图表：我知道如何显示条形图，但我完全不知道如何放置类别，而不是本例中的数据类型。我花了几个小时试图修改这个例子，但仍然一无所获。如果你能看一下，我会非常感激。这个例子之所以有效，是因为它使用了x轴的日期时间，它在highcharts中内置了特殊的支持。你的x轴到底代表什么？我的x轴代表RNA分子的名称（例如mir989、mir234a、mir547b），这些只是字符串。yaxis指出，每个分子在细胞中都有自己的表达水平。问题是这些RNA的数量越来越多，所以我需要一个带滑动窗口的柱形图。在这一点上我无能为力。非常感谢。理想情况下，如果一直放大，它会是什么样子。它会不会只是显示一些标签，直到你接近？NT3RP，非常感谢你的关心。在我的问题上，我可以想到两种可能性。首先是你的想法（对我来说是最好的），所有的标签都是可见的，直到我足够接近，但在比例1:1中只有少数。在另一种解决方案中，图表的比例可能是固定的（例如：只有50个带标签的条），因此我可以使用固定大小的窗口沿X轴滑动。但你的想法正是我需要的。我真的很感谢你的帮助。