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

96

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

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

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

введите описание изображения здесь

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

мммм
источник
можешь дать ссылку?
Дирадж
на сайт? нет, я делаю приложение на android, и эта диаграмма находится на моей локальной странице ..
мммм
Укажите, какую библиотеку вы используете: ChartJS от DevExpress или Chart.js?
Павел Груба
@мммм ты что-то понял? Я попробовал ответ Никиты ниже, но у меня остался этот странный пробел: jsfiddle.net/askhflajsf/xzk6sh1q
Марк Боулдер
Ответ Никиты кажется правильным. @mmmm, пожалуйста, отметьте его как правильный ответ stackoverflow.com/a/39326127/179138
Caio Cunha

Ответы:

156

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

xAxes: [{
    type: 'time',
    ticks: {
        autoSkip: true,
        maxTicksLimit: 20
    }
}]
Никита Аг
источник
4
Ответ выше плюс этот ответ здесь stackoverflow.com/a/37257056/558094 - это бомба.
Винаяк Гарг
3
Что-то здесь не так. У меня огромный разрыв между двумя последними тиками
Марк Боулдер
2
Откуда вы берете эту информацию? Я читаю много ответов на Chart.js - я не могу найти в их документации chartjs.org/docs/latest , не хватает ли мне места, где я действительно могу найти все эти маленькие свойства и перезаписываемые обратные вызовы, задокументированные?
Макс Яри
1
сэр, вы молодцы!
Джей Гит
2
Вы также можете добавить, maxRotation: 0если хотите, чтобы он не вращался перед тем, как начать сбрасывать метки.
Caio Cunha
23

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

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

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

Бен
источник
Это отличный хак, спасибо! Я добавил это сюда .
Trufa
40
Помните, что при прохождении ""также удаляются соответствующие всплывающие подсказки на графике!
Haywire
3
Если я не ошибаюсь , это можно легко сделать с помощью списка понимания , если вы хотите , например , чтобы показать все метки 10: my_labels = [my_labels[i] if i % 10 == 0 else "" for i in range(len(my_list))]. Число 10, конечно, можно объявить как константу в начале файла для упрощения параметризации процесса.
pkaramol
это также могло быть сделано без "", как в ответе на этот вопрос проблема вертикальной линии пояса с chart.js, где у OP была проблема с черной линией, появляющейся при первом появлении этой двойной кавычки, в таком случае это помогло, опять же как @ haywire упомянул, что удаляет ярлык из всплывающей подсказки
Mi-Creativity
15

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

ОБНОВИТЬ:

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

Haywire
источник
Хотел бы использовать это, но я, должно быть, делаю что-то не так. Я сослался на github.com/hay-wire/Chart.js/blob/showXLabels/Chart.js, но (по состоянию на 30 октября 2015 г.) он не работает и даже не содержит фразу «showXLabels». Более старый, на github.com/hay-wire/Chart.js/blob/skip-xlabels/Chart.js , работает нормально. Хотелось бы получить рабочую версию последней версии с тегами, чтобы я мог безопасно связать ее с CDN из RawGit. Этот Fiddle (хотя и не ограниченный
rkagerer
Пытался использовать это, но похоже, что Chart.Line.js не используется, поэтому ничего не меняется. Я использовал «новый график (ctx) .Line (data, options);» для создания диаграммы.
FlyingNimbus
Использование Chart JS 2.6.0 и опция не работает. В конце концов мне пришлось использовать ответ
@Ben
1
Я думаю, это часть предыдущей версии
alexalejandroem
@alexalejandroem Да, ответ был дан в 2014 году! ;-)
Haywire
3

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

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

          scales: {
        xAxes: [
          {
            // aqui controlas la cantidad de elementos en el eje horizontal con autoSkip
            ticks: {
              autoSkip: true,
              maxRotation: 0,
              minRotation: 0
            }
          }
        ]
      }
Эдгар Оливар
источник
2

Согласно проблеме # 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это внешняя зависимость.

Yegong
источник
0

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

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

var clone = function(el){ return el.slice(0); }
Лаки
источник
-1

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

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

Джейк
источник
3
никогда не изменяйте исходный файл библиотеки, он сломается после обновления версии.
Raptor