Chart.js v2隐藏数据集标签

kulphzqa  于 2022-11-06  发布在  Chart.js
关注(0)|答案(9)|浏览(161)

我有以下代码来使用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
        }]
    }
});

代码看起来很简单,但是我不能从图中删除标签。我尝试了很多我在网上找到的解决方案,但是大多数都使用ChartIdeJs V1. x。
如何移除数据集标签?

w8rqjzmb

w8rqjzmb1#

只需如下设置labeltooltip选项

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

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

5us2dqdw

5us2dqdw2#

截至2021年,命名空间已经从options.legend变成了options.plugins.legend,这个简单的代码对我来说很管用--

options: {
  plugins: {
    legend: {
      display: false
    }
  }
}

文件参考

yrdbyhpb

yrdbyhpb3#

添加:

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

在脚本代码的开头;

92dk7w1h

92dk7w1h4#

新解决方案图表JS v3.1.1

上述解决方案对于v3.1之前的chart js版本是正确的,对于v3.1.1,请使用以下内容

...
 options: {
  plugins:{
   legend: {
    display: false
   }
  }
 }
kokeuurv

kokeuurv5#

您也可以移除“标题”,将工具提示放在一行中:

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

72qzrwbm

72qzrwbm6#

只需添加以下内容即可:

legend: {
    display: false,
}

或者,如果您愿意,也可以使用其他选项:

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

uqxowvwt7#

对于那些希望在2021年中删除实际轴标签而不仅仅是图例的人**(Chart.js v.3.5.1)**。注意:这也去除了轴。
第一个

vqlkdk9b

vqlkdk9b8#

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

tjjdgumg9#

使用此代码段替换选项,将为Vanilla JavaScript开发人员修复

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

相关问题