如何禁用chart.js中的图例? [英] How to disable the legends in chart.js?

问题描述

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

I'm trying to style a chart using chart.js but I can't figure out how to disable the legends. At the same time I want to use the generateLegend() to style the legends somewhere else on the page. So I just want to disable the legends inside the canvas element. Can you guys help me?

这是我的代码:

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 对我有用:

Adding this to the options worked for me:

plugins: {
    legend: false,
}

src: https://www.chartjs.org/docs/latest/配置/工具提示.html

这篇关于如何禁用chart.js中的图例?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！