Chart.js v2隐藏数据集标签


106

我有以下代码使用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.jsv1.x。

如何删除数据集标签?

Answers:


252

像这样设置labeltooltip选项

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

小提琴-http: //jsfiddle.net/g19220r6/


像魅力一样工作,谢谢。顺便说一句,如何更改折线图的渐变颜色?
猛禽

1
您的意思是,如何使用渐变作为borderColor / backgroundColor。只需在上下文中创建一个,并在初始化时使用它即可-参见jsfiddle.net/g9h6gtvx
Potatopepeelings

1
如果我想在一个数据集上而不是另一个数据集上使用该怎么办
Nick Alexander

有用!只是一个问题,您在哪里找到了所有这些选择?
fangzhzh

39

加:

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

在脚本代码的开头;


简单且完美地工作。我注意到被接受的答案正在打破某些事情。
stickdeodorant

9

您也可以通过删除“标题”将工具提示放在一行上:

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

在此处输入图片说明


8

就像添加以下内容一样简单: legend: { display: false, }

//或者,如果您愿意,也可以使用另一个选项:

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


简单的答案,无需重新发明轮子。
TNT

选项:{图例:{display:false,}}有助于写入哪个块(这基本上是文档的问题)
Normajean

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.