C3: bilangan bulat hanya dari sumbu x, y

Dibuat pada 15 Okt 2014  ·  9Komentar  ·  Sumber: c3js/c3

bagaimana cara membuat sumbu centang menjadi bilangan bulat saja?
qq 20141015141217

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.
qq 20141015141829

apakah ada cara untuk mengontrol centang sumbu?

question resolved maybe

Komentar yang paling membantu

Versi yang lebih baik:

    axis: {
        y: {
            tick: {
                format: function(x) { return x % 1 === 0 ? x : ''; }
            }
        }
    }

Semua 9 komentar

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.

Apakah halaman ini membantu?
0 / 5 - 0 peringkat

Masalah terkait

Saikat-Sinha picture Saikat-Sinha  ·  3Komentar

aishwaryak picture aishwaryak  ·  4Komentar

jstone-ponderosa picture jstone-ponderosa  ·  3Komentar

udhaya2kmrv picture udhaya2kmrv  ·  3Komentar

DieterSpringer picture DieterSpringer  ·  4Komentar