Batasi nomor label pada grafik garis Chart.js

97

Saya ingin menampilkan semua titik pada bagan saya dari data yang saya dapatkan, tetapi saya tidak ingin menampilkan semua labelnya, karena bagan itu tidak terlalu mudah dibaca. Saya mencarinya di dokumen, tetapi tidak dapat menemukan parameter apa pun yang akan membatasi ini.

Saya tidak ingin mengambil hanya tiga label misalnya, karena grafiknya juga dibatasi pada tiga poin. Apa itu mungkin?

Saya punya sesuatu seperti itu sekarang:

masukkan deskripsi gambar di sini

Jika saya bisa meninggalkan setiap label sepertiga, itu akan bagus. Tetapi saya sama sekali tidak menemukan apa pun tentang opsi label.

mmmm
sumber
bisakah anda memberikan link?
Dheeraj
ke situs web? tidak, saya sedang membuat aplikasi di android dan bagan ini ada di halaman lokal saya ..
mmmm
Harap tentukan pustaka mana yang Anda gunakan, ChartJS by DevExpress atau Chart.js?
Pavel Gruba
@mmmm apakah Anda menemukan sesuatu? Saya mencoba jawaban Nikita di bawah ini, tetapi jawaban itu membuat saya memiliki celah yang aneh: jsfiddle.net/askhflajsf/xzk6sh1q
Mark Boulder
Jawaban Nikita sepertinya benar. @mmmm, mohon pertimbangkan untuk menandainya sebagai jawaban yang benar stackoverflow.com/a/39326127/179138
Caio Cunha

Jawaban:

157

Coba tambahkan options.scales.xAxes.ticks.maxTicksLimitopsi:

xAxes: [{
    type: 'time',
    ticks: {
        autoSkip: true,
        maxTicksLimit: 20
    }
}]
Nikita Ag
sumber
4
Jawaban di atas ditambah jawaban ini di sini stackoverflow.com/a/37257056/558094 , adalah bomnya.
Vinayak Garg
3
Ada yang salah di sini. Saya mendapatkan celah besar antara dua tanda terakhir: jsfiddle.net/askhflajsf/xzk6sh1q
Mark Boulder
2
Dari mana Anda mendapatkan info ini? Banyak pernyataan yang saya baca untuk Chart.js - saya tidak dapat menemukannya di dokumen mereka chartjs.org/docs/latest , apakah saya kehilangan beberapa tempat di mana saya benar-benar dapat menemukan semua properti kecil dan panggilan balik yang dapat diganti didokumentasikan?
Max Yari
1
Tuan, Anda luar biasa!
Jay Geeth
2
Anda juga dapat menambahkan maxRotation: 0jika Anda ingin itu tidak berputar sebelum mulai melepaskan label.
Caio Cunha
23

Untuk konkretnya, misalkan daftar label asli Anda terlihat seperti ini:

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

Jika Anda hanya ingin menampilkan setiap label ke-4, filter daftar label Anda sehingga setiap label ke-4 terisi, dan yang lainnya adalah string kosong (mis ["0", "", "", "", "4", "", "", "", "8"].).

ben
sumber
Ini hack yang bagus, terima kasih! Saya menambahkannya di sini .
Trufa
40
Ingatlah bahwa passing ""juga menghapus tooltips yang sesuai pada grafik!
Haywire
3
Kecuali saya salah ini dapat dengan mudah dilakukan dengan pemahaman daftar jika Anda ingin misalnya untuk menunjukkan setiap label-10: my_labels = [my_labels[i] if i % 10 == 0 else "" for i in range(len(my_list))]. Angka 10 tentu saja dapat dideklarasikan sebagai konstanta di awal file untuk mempermudah parameterisasi proses.
pkaramol
itu juga bisa dilakukan tanpa "", seperti dalam jawaban pertanyaan ini masalah garis gird vertikal dengan chart.js di mana OP memiliki masalah dengan garis hitam muncul pada kemunculan pertama kutipan ganda ini, dalam hal ini membantu, lagi seperti @ haywire menyebutkan itu menghapus label dari tooltip
Mi-Kreativitas
15

Bagi siapa pun yang ingin mencapai ini di Bagan JS V2, berikut ini akan berfungsi:

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


                    var xLabels = data.ticks;

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

Kemudian berikan variabel opsi seperti biasa ke dalam:

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

MEMPERBARUI:

Saya telah memperbarui garpu saya dengan tarikan terbaru (per 27 Jan 2014) dari cabang master Chart.js NNick. https://github.com/hay-wire/Chart.js/tree/showXLabels

JAWABAN ASLI:

Bagi mereka yang masih menghadapi masalah ini, saya bercabang Chart.js beberapa waktu lalu untuk menyelesaikan masalah yang sama. Anda dapat memeriksanya di: https://github.com/hay-wire/Chart.js/tree/skip-xlabels => Cabang yang lebih lama! Periksa cabang showXLabels untuk penarikan terbaru.

Cara Penggunaan:

Berlaku untuk diagram batang dan diagram garis.

Pengguna sekarang dapat meneruskan { showXLabels: 10 }untuk menampilkan hanya 10 label (jumlah label yang ditampilkan sebenarnya mungkin sedikit berbeda tergantung pada jumlah total label yang ada pada sumbu x, tetapi tetap akan tetap mendekati 10)

Sangat membantu saat ada jumlah data yang sangat besar. Sebelumnya, grafik biasanya terlihat hancur karena label sumbu x digambar satu sama lain di ruang sempit. Dengan showXLabels, pengguna sekarang memiliki kendali untuk mengurangi jumlah label menjadi berapa pun jumlah label yang sesuai dengan ruang yang tersedia baginya.

Lihat gambar terlampir untuk perbandingan.

Tanpa showXLabelsopsi: masukkan deskripsi gambar di sini

Dengan { showXLabels: 10 }diteruskan ke opsi: masukkan deskripsi gambar di sini

Berikut beberapa pembahasannya: https://github.com/nnnick/Chart.js/pull/521#issuecomment-60469304

Kusut
sumber
Ingin sekali menggunakan ini tetapi saya pasti melakukan sesuatu yang salah. Saya mereferensikan github.com/hay-wire/Chart.js/blob/showXLabels/Chart.js tetapi (per 30 Okt 2015) itu tidak berfungsi dan bahkan tidak mengandung frase "showXLabels". Yang lebih tua, di github.com/hay-wire/Chart.js/blob/skip-xlabels/Chart.js , berfungsi dengan baik. Ingin sekali mendapatkan versi terbaru yang berfungsi dengan tag sehingga saya dapat menautkannya ke CDN dengan aman dari RawGit. Fiddle ini (meskipun tidak disaring hanya untuk masalah) menunjukkan apa yang saya maksud: jsfiddle.net/45cLcxdh/14
rkagerer
Mencoba menggunakan ini tetapi sepertinya 'Chart.Line.js' tidak digunakan, jadi tidak ada yang berubah. Saya menggunakan "Bagan baru (ctx). Baris (data, opsi);" untuk membuat grafik.
FlyingNimbus
Menggunakan Chart JS 2.6.0 dan opsi ini tidak bekerja. Akhirnya saya harus menggunakan jawaban @ ben stackoverflow.com/a/26183983/3319454
3bdalla
1
Saya rasa ini adalah bagian dari versi sebelumnya
alexalejandroem
@exaleale Ya itu dijawab pada tahun 2014! ;-)
Haywire
3

untuk rotasi sumbu

Gunakan ini:

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

Menurut masalah github chart.js # 12 . Solusi saat ini meliputi:

  1. Gunakan 2.0 alpha (bukan produksi)
  2. Sembunyikan sumbu x sama sekali saat menjadi terlalu ramai (tidak dapat menerima sama sekali)
  3. secara manual mengontrol lompatan label sumbu x (bukan di halaman responsif)

Namun, setelah beberapa menit, saya pikir ada solusi yang lebih baik.

Cuplikan berikut akan menyembunyikan label secara otomatis . Dengan memodifikasi xLabelsdengan string kosong sebelum memanggil draw()dan mengembalikannya setelah itu. Terlebih lagi, memutar ulang label x dapat diterapkan karena ada lebih banyak ruang setelah bersembunyi.

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;
    }
});

Harap perhatikan bahwa itu cloneadalah ketergantungan eksternal.

yegong
sumber
0

Jawaban ini bekerja dengan sangat baik.

Jika Anda bertanya-tanya tentang clonefungsinya, coba yang ini:

var clone = function(el){ return el.slice(0); }
Kekurangan
sumber
-1

Di file Chart.js, Anda harus menemukan (di baris 884 untuk saya)

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

Jika Anda hanya membungkus bahwa panggilan satu baris untuk fillTextdengan if ( i % config.xFreq === 0){ ... } dan kemudian di chart.Line.defaultsadd sesuatu yang sejalan xFreq : 1Anda harus dapat mulai menggunakan xFreqdi Anda optionsketika Anda menelepon new Chart(ctx).Line(data, options).

Pikiran Anda ini cukup hacky.

Jake
sumber
3
jangan pernah mengubah file pustaka asli, yang akan rusak setelah pembaruan versi.
Raptor