Batasi nomor label pada grafik garis Chart.js

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:

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

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

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

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"].).

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

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:

Dengan { showXLabels: 10 }diteruskan ke opsi:

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

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
            }
          }
        ]
      }

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.

Saya memiliki jenis masalah yang serupa, dan diberi solusi yang bagus untuk label acara masalah khusus saya di tooltip tetapi tidak di sumbu x untuk diagram garis chartjs . Lihat apakah ini membantu Anda

Jawaban ini bekerja dengan sangat baik.

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

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

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.