如何在Chart.js v2中隐藏数据集标签?

jvlzgdj9  于 2023-06-22  发布在  Chart.js
关注(0)|答案(9)|浏览(211)

我有以下代码来使用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。
如何删除数据集标签?

5us2dqdw

5us2dqdw1#

只需像这样设置labeltooltip选项

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

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

t9eec4r0

t9eec4r02#

截至2021年,命名空间已从options.legend更改为options.plugins.legend。这个简单的代码为我工作-

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

文件参考

xu3bshqb

xu3bshqb3#

添加:

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

在脚本代码的开头;

ql3eal8s

ql3eal8s4#

ChartJS v3.1.1新解决方案

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

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

x6h2sr285#

对于那些想要在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>
cig3rfwq

cig3rfwq6#

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

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

kq0g1dla

kq0g1dla7#

就像添加这个一样简单:

legend: {
    display: false,
}

或者,如果你愿意,你可以使用这个选项,它也应该工作:

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

tzdcorbm8#

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

fhity93d9#

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

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

相关问题