javascript - 如何禁用 chart.js 中的内置图例

标签 javascript jquery charts

我想禁用图表中的内置图例(彩色矩形)。同时,我想保留我创建的自定义图例 :document.getElementById('legendq3').innerHTML = myDoughnutChart.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
                            });

                            //myDoughnutChart.defaults.global.legends.display = false;

                            document.getElementById('legendq3').innerHTML = myDoughnutChart.generateLegend();
                        </script>

最佳答案

我只找到了这个解决方案。将此添加到选项

legend: {
    display: false,
}

这是一个例子 http://jsfiddle.net/qy1hr7mx/

关于javascript - 如何禁用 chart.js 中的内置图例,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37072333/

相关文章:

javascript - 如何使用 Nodejs 从 mongoDB 检索图像路径

javascript - Css 覆盖/CSS JavaScript 中的图像旋转

java - 带直线的 CodenamOne 条形图

javascript - C3 使用分类 JSON 数据创建条形图

c# - 我们可以在 C#.NET winform 中创建 4 个象限的 3D 图形吗?

javascript - 如何禁用输入类型范围中的特定值

javascript - 允许在滚动动画期间改变元素高度

javascript - 允许 electron `requires` 在 Vite 中原封不动地通过

php - 在 PHP 中从 jquery 访问 DELETE

javascript - jQuery 仅替换 .first() 的一个实例