Menghapus legenda pada grafik dengan chart.js v2

105

Saya membuat beranda menggunakan, Bootstrap, JQuery dan Chart.js (v2). Saya memiliki implementasi saya bekerja menggunakan v1, tetapi baru-baru ini saya masuk ke Bower dan mengunduh v2 menggunakan itu.

Saya membuat kisi 4 kolom masing-masing berisi diagram lingkaran, namun penskalaan di v2 agak membingungkan bagi saya untuk mulai bekerja. Saya ingin bagan menjadi responsif sehingga dapat diskalakan dengan benar dengan perangkat yang lebih kecil seperti tablet dan ponsel cerdas, dan salah satu masalah saya adalah menyingkirkan legenda bagan serta informasi hover saat mengarahkan mouse ke bagian saya. grafik.

index.html

<body>
    <div class="container">
        <div class="row">
            <div class="col-xs-3">
                <canvas id="chart1"></canvas>
            </div>
            <div class="col-xs-3">
                <canvas id="chart1"></canvas>
            </div>
            <div class="col-xs-3">
                <canvas id="chart1"></canvas>
            </div>
            <div class="col-xs-3">
                <canvas id="chart1"></canvas>
            </div>
        </div>
    </div>
</body>

functions.js

$(document).ready(function(){
    var canvas = $("#chart1");
    var data = {
        labels: [],
        datasets: [{
            data: [10, 10],
            backgroundColor: ["#F7464A", "#FDB45C"],
            hoverBackgroundColor: ["#FF5A5E", "#FFC870"]
        }]
    };

    var chart1 = new Chart(canvas, {
        type: "pie",
        data: data,
    });
});

Jika saya menghapus kolom "label" kosong, diagram tidak berfungsi lagi. Dan dari tampilannya ada spasi kecil di bagian atas grafik yang bisa menandakan bahwa headernya tertulis, tapi itu hanyalah string kosong.

Adakah yang punya ide tentang cara menghapus legenda, dan deskripsi hover? Saya tidak bisa memikirkan bagaimana ini digunakan

Saya akan mendapatkan jsfiddle segera setelah saya punya waktu!

EDIT: Tautan ke dokumen: https://nnnick.github.io/Chart.js/docs-v2/#getting-started

javascript jquery css charts chart.js2 Zeliax
sumber

Jawaban:

252

Objek opsi dapat ditambahkan ke bagan saat objek Bagan baru dibuat.

var chart1 = new Chart(canvas, {
    type: "pie",
    data: data,
    options: {
         legend: {
            display: false
         },
         tooltips: {
            enabled: false
         }
    }
});
BrightIntelDusk
sumber
1
Terima kasih banyak, saya menggunakan react dan hal ini harus dilakukan dengan cara bereaksi .. <Donut data = {data} options = {{legend: false}} />
Newton Sheikh
42

Anda dapat mengubah opsi dengan menggunakan Chart.defaults.globalfile javascript Anda. Jadi Anda ingin mengubah legenda dan opsi tooltip.

Hapus legenda

Chart.defaults.global.legend.display = false;

Hapus Tooltip

Chart.defaults.global.tooltips.enabled = false;

Ini fiddler yang berfungsi.

cmlonder
sumber
Keren. Saya tidak tahu bagaimana menggunakan fungsi-fungsi itu karena saya tidak tahu bahwa saya bisa menulis perintah itu di Javascript saya.
Zeliax
1

Anda hanya perlu menambahkan legenda baris itu: {display: false}

Angkatan laut
sumber
5
bagaimana jawaban ini berbeda dari jawaban lain?
Shanteshwar Inde