Обмежте кількість міток на лінійній діаграмі 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"]).

Для тих, хто хоче досягти цього на діаграмі JS V2, працюватиме наступне:

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


                    var xLabels = data.ticks;

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

Потім передайте змінну параметрів, як зазвичай, у:

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

ОНОВЛЕННЯ:

Я оновив свій форк останнім витягом (станом на 27 січня 2014 р.) З головного відділення NNick's 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, однак)

Дуже допомагає, коли є дуже великий обсяг даних. Раніше графік раніше виглядав спустошеним через мітки осей х, накреслені одна над одною в тісному просторі. Тепер 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
            }
          }
        ]
      }

Відповідно до випуску github chart.js №12 . Сучасні рішення включають:

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

Однак через кілька хвилин я думаю, що є краще рішення.

Наступний фрагмент коду буде приховувати мітки автоматично . Змінивши 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це зовнішня залежність.

у мене був подібний тип проблеми, і мені було запропоновано гарне рішення для моєї конкретної мітки show label у підказці, але не в осі 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).

Майте на увазі, це досить хакі.