Chart.js v2 ẩn nhãn tập dữ liệu


106

Tôi có các mã sau để tạo biểu đồ bằng 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
        }]
    }
});

Các mã trông đơn giản, nhưng tôi không thể xóa nhãn khỏi biểu đồ. Tôi đã thử rất nhiều giải pháp mà tôi tìm thấy trên mạng, nhưng hầu hết chúng đều sử dụng Chart.js v1.x.

Làm cách nào để xóa nhãn tập dữ liệu?

Câu trả lời:


252

Chỉ cần đặt labeltooltipcác tùy chọn như vậy

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

Fiddle - http://jsfiddle.net/g19220r6/


hoạt động như sự quyến rũ, cảm ơn. nhân tiện, làm thế nào để thay đổi màu gradient của biểu đồ đường?
Raptor

1
Ý bạn là, làm thế nào để sử dụng gradient làm borderColor / backgroundColor. Chỉ cần tạo một cái trên ngữ cảnh và sử dụng cái đó khi khởi tạo - xem jsfiddle.net/g9h6gtvx
potatopeelings

1
Nếu tôi muốn sử dụng nó trên một bộ dữ liệu nhưng không phải trên một trong những khác
Nick Alexander

Nó hoạt động! chỉ một câu hỏi, bạn đã tìm thấy tất cả các tùy chọn này ở đâu?
fangzhzh

39

thêm vào:

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

khi bắt đầu mã script của bạn;


Đơn giản và hoạt động hoàn hảo. Tôi nhận thấy câu trả lời được chấp nhận đã phá vỡ một số điều.
chất khử trùng vào

9

Bạn cũng có thể đặt chú giải công cụ vào một dòng bằng cách xóa "tiêu đề":

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

nhập mô tả hình ảnh ở đây


8

Nó chỉ đơn giản như thêm điều này: legend: { display: false, }

// Hoặc nếu bạn muốn, bạn có thể sử dụng tùy chọn khác này cũng sẽ hoạt động:

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


Câu trả lời đơn giản, không cần phải phát minh lại bánh xe.
TNT

options: {legend: {display: false,}} Sẽ rất hữu ích khi viết khối nào để đưa nó vào (về cơ bản đây là vấn đề với tài liệu)
Normajean

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

2
Xin chào, chào mừng đến với SO. hãy xem xét thêm một lời giải thích ngắn gọn bên cạnh mã
bagerard
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.