Проблема Highcharts - отображение меток в масштабируемом графике

Question

У меня есть масштабная диаграмма с более чем 200 категориями в xAxis.Следовательно, когда он находится в исходном состоянии (масштаб 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: {
   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 вызывается при перерисовке. Минимальное и максимальное значения содержат самые левые и правые (по оси X) значения включительно.

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