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

Question

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

我试图在这种情况下删除图表的“传奇”文本“得分列表”左侧的小矩形框。我在文档中找不到任何显示方法的内容。是的，我发现了如何完全删除“传奇”，但这会导致条形图在图表设计中变得过高。这是我有一个示例代码：

     <!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>

Run Code Online (Sandbox Code Playgroud)

谢谢！

Answer 1

jor*_*lis 8

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

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

Run Code Online (Sandbox Code Playgroud)

请记住，用于配置嵌入式图例的选项不是很多（因为它实际上是直接在canvas对象中呈现的）。如果您以后决定要以更有意义的方式更改图例的外观，则最简单的方法是使用普通的HTMl / CSS创建自己的图例并对其进行样式设置。您可以使用.generateLegend()原型方法来实现。

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

归档时间：	8 年，8 月前
查看次数：	3083 次
最近记录：	8 年，8 月前