Chart.js v2 ซ่อนป้ายกำกับชุดข้อมูล


109

ฉันมีรหัสต่อไปนี้เพื่อสร้างกราฟโดยใช้ Chart.js v2.1.3:

var ctx = $('#gold_chart');
var goldChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: dates,
        datasets: [{
            label: 'I want to remove this Label',
            data: prices,
            pointRadius: 0,
            borderWidth: 1
        }]
    }
});

รหัสดูเรียบง่าย แต่ฉันไม่สามารถลบป้ายกำกับออกจากกราฟได้ ฉันลองใช้วิธีแก้ปัญหามากมายที่พบทางออนไลน์ แต่ส่วนใหญ่ใช้ Chart.js v1.x

ฉันจะลบป้ายกำกับชุดข้อมูลได้อย่างไร

คำตอบ:


259

เพียงตั้งค่าlabelและtooltipตัวเลือกดังนี้

...
options: {
    legend: {
        display: false
    },
    tooltips: {
        callbacks: {
           label: function(tooltipItem) {
                  return tooltipItem.yLabel;
           }
        }
    }
}

ซอ - http://jsfiddle.net/g19220r6/


ใช้งานได้อย่างมีเสน่ห์ขอบคุณ อย่างไรก็ตามวิธีการเปลี่ยนสีไล่ระดับของแผนภูมิเส้น
Raptor

1
คุณหมายถึงวิธีใช้การไล่ระดับสีเป็น borderColor / backgroundColor เพียงสร้างหนึ่งในบริบทและใช้เมื่อเริ่มต้น - ดูjsfiddle.net/g9h6gtvx
potatopeelings

1
จะเกิดอะไรขึ้นถ้าฉันต้องการใช้กับชุดข้อมูลหนึ่ง แต่ไม่ใช่อีกชุดหนึ่ง
Nick Alexander

มันได้ผล! แค่คำถามเดียวคุณพบตัวเลือกเหล่านี้ได้ที่ไหน
fangzhzh

40

เพิ่ม:

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

ในการเริ่มต้นรหัสสคริปต์ของคุณ


เรียบง่ายและทำงานได้อย่างสมบูรณ์แบบ ฉันสังเกตว่าคำตอบที่ได้รับการยอมรับนั้นทำลายบางสิ่ง
stickdeodorant

ในการตอบสนองฉันทำสิ่งนี้import { Chart } from "react-chartjs-2"; Chart.defaults.global.legend.display = false;
alfonso

9

คุณยังสามารถใส่คำแนะนำเครื่องมือลงในบรรทัดเดียวได้โดยลบ "title":

this.chart = new Chart(ctx, {
    type: this.props.horizontal ? 'horizontalBar' : 'bar',
    options: {
        legend: {
            display: false,
        },
        tooltips: {
            callbacks: {
                label: tooltipItem => `${tooltipItem.yLabel}: ${tooltipItem.xLabel}`, 
                title: () => null,
            }
        },
    },
});

ป้อนคำอธิบายภาพที่นี่


9

ง่ายๆเพียงแค่เพิ่มสิ่งนี้: legend: { display: false, }

// หรือถ้าคุณต้องการคุณสามารถใช้ตัวเลือกอื่นซึ่งควรใช้งานได้:

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


คำตอบง่ายๆไม่จำเป็นต้องสร้างล้อใหม่
ทีเอ็นที

ตัวเลือก: {ตำนาน: {display: false,}} ช่วยเขียนว่าจะใส่บล็อกไหน (นี่คือปัญหาในเอกสารประกอบ)
Normajean

2
new Chart('idName', {
      type: 'typeChar',
      data: data,
      options: {
        legend: {
          display: false
        }
      }
    });

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