C3: Label terpotong dalam bagan

Saya memiliki masalah yang sama:

Cukup tambahkan

padding: {
  left: 500
},

ke konfigurasi bagan Anda.
Untuk mengatur nilai dinamis, saya menggunakan plugin jQuery kecil yang memiliki panjang string teks:

$.fn.textWidth = function(text, font) {
  if (!$.fn.textWidth.fakeEl) $.fn.textWidth.fakeEl = $('<span>').hide().appendTo(document.body);
  $.fn.textWidth.fakeEl.text(text || this.val() || this.text()).css('font', font || this.css('font'));
  return $.fn.textWidth.fakeEl.width();
};

var longest_text_width = 0;
chartData[0].forEach(function(data) {
  var w = $.fn.textWidth(data, '13px Clear Sans');
    if (w > longest_text_width) {
      longest_text_width = w;
    }
});

var chart = c3.generate({

  ...

  padding: {
    left: longest_text_width + 10 // add 10px for some spacing
  },

  ...

});

Terima kasih. Itu memecahkan masalah saya. Library ini bagus - tetapi Anda mungkin harus menambahkan beberapa jenis penghitungan otomatis padding di rilis mendatang. Ini adalah jenis langkah yang harus Anda otomatisasi sehingga pengguna tidak perlu memikirkannya lagi.

Hai, saya setuju. Masalah ini terkait dengan # 129 dan saya akan memperbaikinya nanti. Terima kasih!

Hai @AbeHandler , saya pikir masalah padding otomatis telah diperbaiki di versi terbaru 0.1.38. Silakan coba versi ini.

Saya pikir ada sesuatu yang aneh yang terjadi dengan kalkulasi padding di perangkat seluler.

Jika Anda pergi ke http://c3js.org/ dan di Alat Pengembang Google Chrome -> Toggle Device Mode -> iPhone 3GS (yang lain akan melakukannya) dan tekan F5. Nilai sumbu Y terpotong.

Ada ide bagaimana cara memperbaikinya?

Maaf, c3js.org tidak bekerja dengan benar. Saya merencanakan versi tetap 0.4.10 secepatnya, maka itu akan berhasil.

di halaman demo masalah ini masih ada

@ nhduc296 Saya baru saja memeriksa - menurut saya baik-baik saja?

@tokopedia

di halaman demo http://c3js.org/samples/axes_x_tick_format.html

var chart = c3.generate({
    data: {
        x: 'x',
        columns: [
            ['x', '2010-01-01', '2011-01-01', '2012-01-01', '2013-01-01', '2014-01-01', '2015-01-01'],
            ['sample', 30, 200, 100, 400, 150, 250]
        ]
    },
    axis : {
        x : {
            type : 'timeseries',
            tick: {
                //format: function (x) { return x.getFullYear(); }
              format: '%d-%m-%Y' // format string is also available for timeseries data
            }
        }
    }
});

Ah. Ya memang, sepertinya masih ada masalah dengan judul yang lebih panjang.

Masalah ini sepertinya masih belum terpecahkan. Ini mengganggu: /. Adakah yang tahu bagaimana itu harus dilakukan dengan cara yang benar? Menghitung padding dari total panjang label masih merupakan solusi yang lebih baik atau adakah metode yang lebih baik?

Ada pembaruan di sini?

Saya masih melihat masalah ini saat menyetel hitungan centang khusus. Tanda centang terakhir sedang dipotong.

Mengalami masalah yang sama di sini.

Tahun 2018.

Adakah yang bisa membantu saya? Dengan pendekatan 'deklaratif' ini, saya tidak tahu apa yang harus dilakukan :(

(Semua label tumpang tindih atau terpotong)

@inlinecoder mungkin memutar label Anda dapat menyelesaikan masalah Anda:
http://c3js.org/samples/axes_x_tick_rotate.html

Tentu saja, kami dapat menemukan solusi, tetapi itu tidak menyelesaikan masalah global.

Atm, saya sudah berhasil mengatasi overlapping dan cropping, setidaknya untuk saat ini.

Apa yang saya lakukan hanyalah memindahkan gaya bersarang dan menjadikannya global. Saya kira, C3 mencoba menemukan gaya yang cocok dan melakukan beberapa kalkulasi dengannya; dan jika beberapa gaya tertentu disarangkan, C3 tidak dapat menemukannya, dan pada dasarnya tidak dapat melakukan penghitungan yang tepat.

Ada pembaruan dalam masalah ini? Saya masih mendapatkan ini.

@mervinva dapatkah Anda melampirkan masalah yang Anda alami, sehingga lebih mudah untuk memikirkan cara menanganinya?

Masalah yang sama seperti gambar yang dikomentari oleh lepolt di atas.

Masalah yang sama bagi saya ... Label Tanggal / Tahun terpotong. Masalah yang sama seperti lepolt di atas.

Masih mengalami masalah ini. Ada perbaikan?

Itu wajan untuk saya

.c3 .c3-axis-x .tick:last-of-type text {
  transform: translate(-8px, 0)!important;
}

@roremeol , itu bukan solusi yang baik, meskipun berhasil.

@inlinecoder , untuk saat ini sampai mereka memperbaikinya, itu yang terbaik yang saya miliki

Cara lain. Namun hal itu mungkin dapat menyebabkan efek samping

svg {
    overflow: visible !important;
}