bagaimana cara membuat sumbu centang menjadi bilangan bulat saja?
apa yang saya coba adalah menggunakan opsi centang:
tick: {
format: function(x) {
return (x == Math.floor(x)) ? x : "";
}
}
ini dapat membuat label hanya menampilkan bilangan bulat, tetapi garis pemisah pada sumbu masih keluar.
apakah ada cara untuk mengontrol centang sumbu?
pada versi pengembangan saat ini (master) Anda dapat menggunakan axis.y.values untuk mengatur daftar
{
axis: {
y: {
ticks: [1,2,3]
}
}
}
tapi ini tidak bisa dinamis berdasarkan sumber data, benar kan?
Anda dapat menghitung nilai-nilai tersebut setelah pemuatan data, mengaturnya menjadi chart.internal.config.axis_y_tick_values
dan kemudian memanggil chart.flush()
untuk menerapkan nilai sumbu baru.
Bagaimana dengan kode ini?
axis: {
y: {
tick: {
format: function (x) {
if (x != Math.floor(x)) {
var tick = d3.selectAll('.c3-axis-y g.tick').filter(function () {
var text = d3.select(this).select('text').text();
return +text === x;
}).style('opacity', 0);
return '';
}
return x;
}
}
}
}
Sepertinya sudah terpecahkan, jadi tolong izinkan saya menutupnya.
FWIW, membutuhkan mengetahui internal D3 dan menjalankan JS tampaknya sangat aneh. Saya sering melihat pola itu dalam masalah C3 ini: seseorang memiliki masalah, dan alih-alih menawarkan opsi C3, 5-30 baris javascript yang memanipulasi SVG yang mendasarinya dengan d3 adalah solusi yang diterima. Saya pikir dalam jangka panjang itu akan menjadi kerugian besar bagi adopsi C3.
Khusus untuk masalah ini, opsi "axis.y.tick.integer_only" akan menjadi nilai yang luar biasa. Saya ingin memberikan ekstensi ke C3 untuk ini. Saya melihat contoh ekstensi di sini . Apakah ada panduan ekstensi di suatu tempat yang dapat memandu saya?
Terima kasih!
Edit: tata bahasa.
Anda dapat menghitung nilai-nilai tersebut setelah data dimuat, setel ke chart.internal.config.axis_y_tick_values dan kemudian panggil chart.flush () untuk menerapkan nilai sumbu baru.
Mengacu pada ini, karena saya juga mengalami masalah ini hari ini - melakukan flush()
akan mengacaukan animasi perubahan data, dan menambahkan penundaan juga memiliki beberapa gangguan grafis. Namun, menyetel chart.internal.config.axis_y_tick_values
ke nilai yang benar sebelum memanggil load()
bekerja dengan sempurna. Mungkin ini akan membantu seseorang :).
Versi yang lebih baik:
axis: {
y: {
tick: {
format: function(x) { return x % 1 === 0 ? x : ''; }
}
}
}
Terima kasih nnabinh - bekerja dengan baik.
Komentar yang paling membantu
Versi yang lebih baik: