如何删除 Chart.js 中图例文本旁边的矩形框答案

【问题标题】：How to remove rectangle box next to the legend text in Chart.js如何删除 Chart.js 中图例文本旁边的矩形框
【发布时间】：2017-03-13 16:18:09
【问题描述】：

在这种情况下，我正在尝试删除图表中“图例”文本“分数列表”左侧的小矩形框。我在文档中找不到任何显示如何做到这一点的内容。是的，我找到了如何完全删除“图例”，但这会导致条形图在我的图表设计中过高。这是我的示例代码：

     <!DOCTYPE html>
         <html>
             <head>
                 <title>ChartJS - BarGraph</title>
                 <style type="text/css">
                     #chart-container {
                         width: 300px;
                         height: 150px;
                     }
                 </style>
                 <!-- javascript -->
     <script type="text/javascript" src="jquery-1.11.min.js"></script>
     <script type="text/javascript" src="Chart.min.js"></script>

         <script type="text/javascript">

         $(document).ready(function(){
         $.ajax({
             //url: "test.html",
             //method: "GET",

         success: function(data) {
                     // test data
             var data = [
                 {  
                     "Serverid":"1",
                     "score":"37"
                 },
                 {  
                     "Serverid":"2",
                     "score":"60"
                 },
                 {  
                     "Serverid":"3",
                     "score":"35"
                 },
                 {  
                     "Serverid":"4",
                     "score":"41"
                 },
                 {  
                     "Serverid":"5",
                     "score":"50"
                 },
            {  
                     "Serverid":"6",
                     "score":"70"
                 },
     {  
                     "Serverid":"7",
                     "score":"70"
                 },
            {  
                     "Serverid":"8",
                     "score":"70"
                 },     
                 // ... it can be more than that
                 ];

             var Server = [];
             var score = [];

             for(var i in data) {
             Server.push("Server " + data[i].Serverid);
             score.push(data[i].score);
             }
             var chartdata = {

             labels: Server,
             datasets : [

             {
             label: 'Score List',

             backgroundColor: [

                 // even color
             'rgba(255, 99, 132, 0.2)',
             // odd color
                 'rgba(75, 192, 192, 0.2)'

             ],

             borderColor: [
         // even color
             'rgba(255,99,132,1)',
             // odd color
             'rgba(153, 102, 255, 1)'
             ],

             borderWidth: 1,
             hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
             hoverBorderColor: 'rgba(200, 200, 200, 1)',
             data: score
             }
                         ]
         };

         var ctx = $("#mycanvas");

         var barGraph = new Chart(ctx, {
                         type: 'bar',
                         data: chartdata,
                         options: {
                             scales: {
                                 yAxes: [{
                                         ticks: {
                                             beginAtZero: true
                                             }
                                     }]
                                 },
                        tooltips: {
                               callbacks: {
                                 label: function(tooltipItem, data) {
                      var ttip_value = data.datasets[0].data[tooltipItem.index];
                      if(ttip_value == 31) {
                        return "DOWN";
                      }else {
                    return "UP";
                      }

                                 }
                                }
                             }
                  }
                         });
         }, // end success
         error: function(data) {
                     console.log(data);
                     alert(data);
                     }
         }); // end ajax

         });

         </script>
             </head>
             <body>

         <br> Bar Chart <br>

                 <div id="chart-container">

            <canvas id="mycanvas" width="200" height="100"></canvas>
                 </div>



         </body>
         </html>

谢谢！

【问题讨论】：

标签： javascript jquery chart.js

【解决方案1】：

删除图例彩色框的最简单方法是使用 legend.labels.boxSize 属性并将其设置为 0（这在 chart.js API here 中有记录）。这是一个codepen 示例。

legend: {
 labels: {
   boxWidth: 0,
 }
}

请记住，用于配置嵌入图例的选项并不多（因为它实际上是直接在画布对象中呈现的）。如果您以后决定要以更重要的方式更改图例的外观和感觉，那么使用普通 HTMl/CSS 创建自己的图例并相应地设置样式是最容易的。您可以通过使用.generateLegend() 原型方法来实现这一点。

这是使用自定义外部图例的图表的example。

【讨论】：