Ограничение количества меток на линейном графике Chart.js

Я хочу отобразить все точки на моей диаграмме из полученных данных, но я не хочу отображать для них все метки, потому что тогда диаграмма не очень удобочитаема. Я искал это в документации, но не смог найти ни одного параметра, который ограничивал бы это.

Я не хочу брать для примера только три метки, потому что тогда диаграмма также ограничена тремя точками. Является ли это возможным?

У меня сейчас что-то вроде этого:

Если бы я мог просто покинуть каждый третий-четвертый лейбл, было бы здорово. Но про варианты наклеек я абсолютно ничего не нашел.

Попробуйте добавить options.scales.xAxes.ticks.maxTicksLimitопцию:

xAxes: [{
    type: 'time',
    ticks: {
        autoSkip: true,
        maxTicksLimit: 20
    }
}]

Для конкретности предположим, что ваш исходный список меток выглядит так:

["0", "1", "2", "3", "4", "5", "6", "7", "8"]

Если вы хотите отображать только каждую 4-ю метку, отфильтруйте свой список меток так, чтобы каждая 4-я метка была заполнена, а все остальные были пустой строкой (например ["0", "", "", "", "4", "", "", "", "8"]).

Для всех, кто хочет добиться этого на Chart JS V2, будет работать следующее:

 var options =  {  
         scales: {
            xAxes: [{
                afterTickToLabelConversion: function(data){


                    var xLabels = data.ticks;

                    xLabels.forEach(function (labels, i) {
                        if (i % 2 == 1){
                            xLabels[i] = '';
                        }
                    });
                } 
            }]   
        }
}

Затем передайте переменную options как обычно в:

myLineChart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: options
});`

ОБНОВИТЬ:

Я обновил свою вилку с помощью последней версии (по состоянию на 27 января 2014 г.) из основной ветки NNick Chart.js. https://github.com/hay-wire/Chart.js/tree/showXLabels

ОРИГИНАЛЬНЫЙ ОТВЕТ:

Для тех, кто все еще сталкивается с этой проблемой, я некоторое время назад разветвил Chart.js, чтобы решить ту же проблему. Вы можете проверить это: https://github.com/hay-wire/Chart.js/tree/skip-xlabels => Старая ветка! Проверьте ветку showXLabels на предмет последней версии.

Как использовать:

Применимо к гистограмме и линейной диаграмме.

Теперь пользователь может передать a, { showXLabels: 10 }чтобы отобразить только 10 меток (фактическое количество отображаемых меток может немного отличаться в зависимости от общего количества меток, присутствующих на оси x, но оно все равно останется близким к 10)

Очень помогает при очень большом количестве данных. Раньше график выглядел опустошенным из-за меток оси X, нанесенных друг на друга в тесноте. Теперь у showXLabelsпользователя есть возможность уменьшить количество меток до любого количества меток, которые хорошо помещаются в доступном ему пространстве.

Смотрите прикрепленные изображения для сравнения.

Без showXLabelsопции:

При { showXLabels: 10 }переходе в вариант:

Вот обсуждение этого вопроса: https://github.com/nnnick/Chart.js/pull/521#issuecomment-60469304

для вращения оси

использовать это:

          scales: {
        xAxes: [
          {
            // aqui controlas la cantidad de elementos en el eje horizontal con autoSkip
            ticks: {
              autoSkip: true,
              maxRotation: 0,
              minRotation: 0
            }
          }
        ]
      }

Согласно проблеме # 12 на github chart.js . Текущие решения включают:

1. Используйте альфа 2.0 (не в производстве)
2. Полностью скрыть ось X, когда становится слишком много (вообще не может принять)
3. вручную управлять пропуском метки оси x (не на адаптивной странице)

Однако через несколько минут я думаю, что есть лучшее решение.

Следующий фрагмент кода автоматически скроет метки . Путем изменения xLabelsпустой строки перед вызовом draw()и восстановления после этого. Более того, можно применить вращающиеся метки x, так как после скрытия остается больше места.

var axisFixedDrawFn = function() {
    var self = this
    var widthPerXLabel = (self.width - self.xScalePaddingLeft - self.xScalePaddingRight) / self.xLabels.length
    var xLabelPerFontSize = self.fontSize / widthPerXLabel
    var xLabelStep = Math.ceil(xLabelPerFontSize)
    var xLabelRotationOld = null
    var xLabelsOld = null
    if (xLabelStep > 1) {
        var widthPerSkipedXLabel = (self.width - self.xScalePaddingLeft - self.xScalePaddingRight) / (self.xLabels.length / xLabelStep)
        xLabelRotationOld = self.xLabelRotation
        xLabelsOld = clone(self.xLabels)
        self.xLabelRotation = Math.asin(self.fontSize / widthPerSkipedXLabel) / Math.PI * 180
        for (var i = 0; i < self.xLabels.length; ++i) {
            if (i % xLabelStep != 0) {
                self.xLabels[i] = ''
            }
        }
    }
    Chart.Scale.prototype.draw.apply(self, arguments);
    if (xLabelRotationOld != null) {
        self.xLabelRotation = xLabelRotationOld
    }
    if (xLabelsOld != null) {
        self.xLabels = xLabelsOld
    }
};

Chart.types.Bar.extend({
    name : "AxisFixedBar",
    initialize : function(data) {
        Chart.types.Bar.prototype.initialize.apply(this, arguments);
        this.scale.draw = axisFixedDrawFn;
    }
});

Chart.types.Line.extend({
    name : "AxisFixedLine",
    initialize : function(data) {
        Chart.types.Line.prototype.initialize.apply(this, arguments);
        this.scale.draw = axisFixedDrawFn;
    }
});

Обратите внимание, что cloneэто внешняя зависимость.

У меня была проблема аналогичного типа, и мне было предоставлено хорошее решение для моей конкретной проблемы: показать метку во всплывающей подсказке, но не по оси x для линейной диаграммы chartjs . Посмотри, поможет ли это тебе

Этот ответ работает как шарм.

Если вам интересно узнать об этой cloneфункции, попробуйте эту:

var clone = function(el){ return el.slice(0); }

В файле Chart.js вы должны найти (в строке 884 для меня)

var Line = function(...
    ...
    function drawScale(){
        ...
        ctx.fillText(data.labels[i], 0,0);
        ...

Если вы просто обернуть этот вызов на одну строку , чтобы fillTextс , if ( i % config.xFreq === 0){ ... } а затем в chart.Line.defaultsдобавить что - то линии , xFreq : 1вы должны быть в состоянии начать использовать xFreqв вашем optionsкогда вы звоните new Chart(ctx).Line(data, options).

Имейте в виду, это довольно взломано.