การลบคำอธิบายแผนภูมิด้วย chart.js v2.0


107

ฉันกำลังสร้างโฮมเพจโดยใช้ Bootstrap, JQuery และ Chart.js (v2) ฉันทำให้การติดตั้งใช้งานได้โดยใช้ v1 แต่เพิ่งเข้าสู่ Bower และดาวน์โหลด v2 โดยใช้สิ่งนั้น

ฉันกำลังสร้างตาราง 4 คอลัมน์แต่ละคอลัมน์มีแผนภูมิวงกลม แต่การปรับขนาดใน v2 ทำให้ฉันสับสนในการทำงาน ฉันต้องการให้แผนภูมิตอบสนองเพื่อให้ปรับขนาดได้อย่างเหมาะสมกับอุปกรณ์ขนาดเล็กเช่นแท็บเล็ตและสมาร์ทโฟนและปัญหาอย่างหนึ่งของฉันคือการกำจัดตำนานของแผนภูมิรวมถึงข้อมูลการวางเมาส์เมื่อวางเมาส์เหนือส่วนต่างๆของ แผนภูมิ.

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,
    });
});

ถ้าฉันลบช่อง "ป้ายกำกับ" ที่ว่างเปล่าแผนภูมิจะไม่ทำงานอีกต่อไป และจากลักษณะของมันจะมีช่องว่างเล็ก ๆ ที่ด้านบนของแผนภูมิซึ่งอาจบ่งบอกได้ว่ามีการเขียนส่วนหัว แต่เป็นเพียงสตริงว่างเปล่า

ใครมีความคิดเกี่ยวกับวิธีลบคำอธิบายแผนภูมิและคำอธิบายการวางเมาส์ ฉันไม่สามารถเข้าใจวิธีการใช้งานนี้ได้

ฉันจะจับมือ jsfiddle ทันทีที่มีเวลา!

แก้ไข: ลิงก์ไปยังเอกสาร: https://nnnick.github.io/Chart.js/docs-v2/#getting-started

คำตอบ:


256

สามารถเพิ่มอ็อบเจ็กต์อ็อพชันลงในแผนภูมิเมื่อสร้างอ็อบเจ็กต์แผนภูมิใหม่

var chart1 = new Chart(canvas, {
    type: "pie",
    data: data,
    options: {
         legend: {
            display: false
         },
         tooltips: {
            enabled: false
         }
    }
});

1
ขอบคุณมากฉันใช้ react และ hwo นี้ก็ทำในแบบที่ตอบสนอง .. <Donut data = {data} options = {{legend: false}} />
Newton Sheikh

43

คุณสามารถเปลี่ยนตัวเลือกได้โดยใช้Chart.defaults.globalในไฟล์จาวาสคริปต์ของคุณ ดังนั้นคุณจึงต้องการเปลี่ยนตัวเลือกคำอธิบายแผนภูมิและคำแนะนำเครื่องมือ

ลบตำนาน

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

ลบคำแนะนำเครื่องมือ

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

นี่คือนักเล่นซอที่ใช้งานได้


เย็น. ฉันไม่ได้ใช้ฟังก์ชันเหล่านั้นอย่างไรเพราะฉันไม่รู้ว่าฉันสามารถเขียนคำสั่งเหล่านั้นใน Javascript ได้
Zeliax

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.