簡體   English   中英

如何禁用chart.js中的內置圖例

[英]How to disable the built-in legends in chart.js

我想禁用圖表中的內置圖例(彩色矩形)。 同時我想保留我用 :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/

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM