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

2022-01-22 00:00:00 jquery javascript chart.js

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

I am trying to remove the small rectangle box on the left of the "legend" text "Score List" in this case, of the chart. I can not find anything in the docs that shows how to do that. Yes, I found how to remove the "legend" entirely, but that would causes the graphs of the bars to go too high in my chart design. Here is a sample code I have:

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

谢谢！

推荐答案

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

The easiest way to remove the legend colored boxes is to use the legend.labels.boxSize property and set it to 0 (this is documented in the chart.js API here). Here is a codepen example.

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

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

Keep in mind that there are not very many options for configuring the embedded legend (since it is actually rendered directly in the canvas object). If you later decide you would like to change the legend look and feel in a more significant way then it is easiest to create your own legend using normal HTMl/CSS and style it accordingly. You can achieve this by using the .generateLegend() prototype method.

这是一个使用自定义外部图例的图表的示例.

Here is an example of a chart that is using a custom external legend.

相关文章