C3: Asal tidak diposisikan dengan benar

Dengan mengatur bantalan sumbu dan rentang bagan, Anda mencapai ini.

var chart = c3.generate({
    data: {
        columns: [
            ['data1', 30, 200, 100, 400, 150, 250],
            ['data2', 50, 20, 10, 40, 15, 25]
        ],
        axes: {
            data1: 'y',
            data2: 'y2'
        }
    },
    axis: {
        y: {
            padding: {bottom: 0},
            min: 0
        },
        x: {
            padding: {left: 0},
            min: 0
        }
    }
});

JS Fiddle: http://jsfiddle.net/santazhang/gswhaLu0/1/

Terima kasih, itu sebagian memecahkan masalah, tapi...

• Di JSFiddle Anda dengan baik hati asalkan titik data pertama tampak sebagian dikaburkan oleh sumbu Y, yang tidak benar - itu harus digambar di atas, bukan di bawah dan dipotong
• Ketika ada padding (seperti pada contoh gambar saya) dua garis bersilangan dan saling melewati, yang tidak masuk akal karena itu bukan asal ... jadi bagaimana sumbu dapat dikonfigurasi sehingga garis berhenti di titik yang mereka sentuh alih-alih melanjutkan satu sama lain?
• Default C3 adalah pengaturan yang sangat aneh/tidak biasa, menghasilkan grafik yang tidak ortodoks yang memiliki fitur yang tidak cocok dengan grafik umum/dunia nyata... mengapa? Mengapa tidak menggunakan pengaturan tradisional yang saya tanyakan, yang diharapkan kebanyakan orang?

Hai,

• c3 tidak memperbaiki asal sebagai 0 karena asal tidak selalu 0. Maksud saya jika rentang data adalah 100 hingga 500, kami ingin fokus pada rentang seperti 80 hingga 520.
• Seperti yang Anda katakan, tampaknya wajar, tetapi sekarang sulit untuk menampilkan titik data pertama saat Anda menulis karena spesifikasi SVG dan cara implementasi c3. Namun, saya pikir itu dapat diterima dan semacam trade off. Apakah Anda punya ide untuk memperbaiki ini?
• Maaf saya tidak yakin apa yang Anda maksud, tetapi jika yang Anda maksud adalah tanda centang di bagian bawah dan atas sumbu, itu cara d3. Namun, mungkin untuk menyembunyikan dengan menggunakan axis.x.tick.outer = false dan axis.y.tick.outer = false jika Anda mau.
• Seperti yang Anda katakan, pengaturan default itu penting. Saya akan memperbarui sesuai dengan permintaan jika diperlukan.

Tolong biarkan aku menutup.