Chart.js v2 隐藏数据集标签

Posted 2023-02-16

【中文标题】Chart.js v2 隐藏数据集标签

【英文标题】：Chart.js v2 hide dataset labels

【发布时间】：2016-09-09 07:32:08

【问题描述】：

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

如何删除数据集标签？

【参考方案1】：

只需像这样设置label 和tooltip 选项

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

---

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

【讨论】：

你的意思是，如何使用渐变作为边框颜色/背景颜色。只需在上下文中创建一个并在初始化时使用它 - 请参阅jsfiddle.net/g9h6gtvx

如果我想在一个数据集上使用它而不在另一个数据集上使用它怎么办

不幸的是，这在最新的 v2.9.3 中不再有效。 jsfiddle.net/hwtysf64

这适用于我在 3.4.1 中，通过将 options.plugins.tooltip.callbacks.label 设置为函数。

这对我不起作用。在插件中添加代码不适用于选项

【参考方案2】：

截至 2021 年，命名空间已从 options.legend 更改为 options.plugins.legend。这个简单的代码对我有用 -

data
...
,
options: 
  plugins: 
    legend: 
      display: false
    
  

【讨论】：

这应该是公认的答案...以前的答复已过时且不起作用...但您的答复可以。

是的，这是可行的，必须被接受为答案。

这应该是公认的答案，它有效，谢谢

React chart js 2 这是正确答案

【参考方案3】：

添加：

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

在脚本代码的开头；

【讨论】：

简单而完美。我注意到接受的答案破坏了一些东西。

在 React 中，我这样做了 import Chart from "react-chartjs-2"; Chart.defaults.global.legend.display = false;

【参考方案4】：

就像添加这个一样简单：

legend: 
    display: false,

或者，如果您愿意，也可以使用这个也可以使用的其他选项：

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

【讨论】：

options: legend: display: false, 它有助于写出放入哪个块（这基本上是文档的问题）

【参考方案5】：

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

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

【参考方案6】：

新解决方案 ChartJS v3.1.1

上述解决方案对于 v3.1 之前的以前版本的图表 js 是正确的，对于 v3.1.1 使用以下

 ...
 options: 
  plugins:
   legend: 
    display: false
   
  
 

【参考方案7】：

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

【讨论】：

嗨，欢迎来到 SO。考虑在代码旁边添加一个简短的解释

【参考方案8】：

对于那些想要在 2021 年删除实际轴标签而不仅仅是图例的人（Chart.js v.3.5.1）。注意：这也会移除坐标区。

const chartWrap = document.querySelector('.chart-wrap')
const canvas = document.createElement('canvas')

chartWrap.appendChild(canvas)
const ctx = canvas.getContext('2d')

const myChart = new Chart(ctx, 
    type: 'line',
    data: 
        labels: ['Your', 'axis', 'labels'],
        datasets: [
            
                label: 'Your legend label',
                data: [1, 3, 2],
                backgroundColor: '#54ACEF'
            
        ]
    ,
    options: 
        maintainAspectRatio: false,
        plugins: 
            legend: false // Hide legend
        ,
        scales: 
            y: 
                display: false // Hide Y axis labels
            ,
            x: 
                display: false // Hide X axis labels
            
           
    
)

<div class="chart-wrap" style="width: 200px; height: 100px;"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js" integrity="sha512-Wt1bJGtlnMtGP0dqNFH1xlkLBNpEodaiQ8ZN5JLA5wpc1sUlk/O5uuOMNgvzddzkpvZ9GLyYNa8w2s7rqiTk5Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

【讨论】：

这不会删除轴标签，而是将整个轴与网格一起删除

天哪，你是对的@LeeLenalee。我可能应该改写。感谢您的评论:)

【参考方案9】：

用这个 sn-p 替换选项，将为 Vanilla javascript 开发人员修复

options: 
            title: 
                text: 'Hello',
                display: true
            ,
            scales: 
                xAxes: [
                    ticks: 
                        display: false
                    
                ]
            ,
            legend: 
                display: false