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

Question

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

这是问题的屏幕截图：

这是我的代码：http: //jsfiddle.net/sherlock85/hJcQm/

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

我将衷心感谢您的帮助。

谢谢， 安德烈

Answer 1

按照从易到难的顺序...

由于您的类别主要是数字（例如'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))
        }
    }
});

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

Answer 2

我的解决方案：

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

Answer 3

对于最初的问题来说可能有点太晚了，但我正在用 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 并且使用这个特定的数据集（我很确定这一切都可以更加完善 - 但它有效）。

Answer 4

这就是我如何解决这个问题：

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;
   }
}

tickPositioner 在重绘时被调用。min 和 max 包含最左边和最右边（x 轴）的值。