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

Ответ 1

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

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

Ответ 2

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

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

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

Ответ 3

UPDATE:

Я обновил свою вилку с последним нажатием (по состоянию на 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 для последнего притяжения.

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

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

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

Помогает, когда имеется очень большой объем данных. Раньше граф использовался для того, чтобы выглядеть опустошенным из-за ярлыков оси х, нарисованных друг над другом в тесном пространстве. С помощью showXLabels у пользователя теперь есть элемент управления, чтобы уменьшить количество меток до любого количества меток, подходящих для использования в доступном для него пространстве.

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

Без опции showXLabels:

С { showXLabels: 10 } передается в опцию:

Здесь несколько обсуждений: https://github.com/nnnick/Chart.js/pull/521#issuecomment-60469304

Ответ 4

Для тех, кто хочет достичь этого на диаграмме 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
});`

Ответ 5

В соответствии с chart.js github issue # 12. Текущие решения включают:

• Использовать 2,0 альфа (не для производства)
• Скрыть ось x вообще, когда она становится слишком толпой (не может принимать вообще)
• ручное управление меткой пропустить ось 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 - внешняя зависимость.

Ответ 6

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

Ответ 7

В файле 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).

Помните, что это довольно хаки.

Ответ 8

Этот ответ работает как прелесть.

Если вам интересно о функции clone, попробуйте следующее:

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