如何禁用chart.js中的图例

How to disable the legends in chart.js?

本文关键字：js 何禁用 chart      更新时间：2023-09-26

我正在尝试使用chart.js设计图表样式，但我不知道如何禁用图例。同时，我想使用generateLegend（）为页面上其他地方的图例设置样式。所以我只想禁用画布元素中的图例。你们能帮我吗？

这是我的代码：

canvas id="myChart"></canvas>
                        <div id="legendq3"></div>
                        <script> 
                            var ctx = document.getElementById("myChart");
                            var data = {
                                labels: [
                                    "Red",
                                    "Green",
                                    "Yellow"
                                ],
                                datasets: [
                                    {
                                        data: [300, 50, 100],
                                        backgroundColor: [
                                            "#FF6384",
                                            "#36A2EB",
                                            "#FFCE56"
                                        ],
                                        hoverBackgroundColor: [
                                            "#FF6384",
                                            "#36A2EB",
                                            "#FFCE56"
                                        ]
                                    }]
                            };
                            var options = {
                                 legendTemplate :'<ul>'
                                                +'<% for (var i=0; i<datasets.length; i++) { %>'
                                                +'</li>'
                                                +'<span style='"background-color:<%=datasets[i].lineColor%>'"></span>'
                                                +'<% if (datasets[i].label) { %><%= datasets[i].label %><% } %>'
                                                +'</li>'
                                                +'</ul>'
                            }
                            var myDoughnutChart = new Chart(ctx, {
                                type: 'doughnut',
                                data: data,
                                options: options
                            });
                            document.getElementById('legendq3').innerHTML = myDoughnutChart.generateLegend();
                        </script>

将其添加到options中对我有效：

plugins: {
    legend: false,
}

src:https://www.chartjs.org/docs/latest/configuration/tooltip.html

对于提出问题的人来说，这可能已经晚了。但是，我仍然提出了对我有效的解决方案，而不会给下一个可能遇到同样问题的人带来太多麻烦。只需将display属性false值传递给legend&标签属性，如below。

options: {
  legend: {
    display: false,
      labels: {
        display: false
      }
  }
}

图表图例的全局选项在chart.defaults.global.legend 中定义

把这个放在你的代码中（在你声明图表后）：

myDoughnutChart.defaults.global.legend.display = false

从文档中，可以将以下属性添加到选项对象中以隐藏图例：

var chart = new Chart(canvas, {
    type: 'pie',
    data: data,
    options: {
        legend: {
            display: false
        }
}
});

您应该将图例选项设置为"none"

{ legend: 'none' }

来源：https://developers.google.com/chart/interactive/docs/gallery/piechart

相关文章：