Question

我正在尝试删除＆＃34;传奇＆＃34;左侧的小矩形框。文本＆＃34;得分列表＆＃34;在这种情况下，图表。我在文档中找不到任何显示如何执行此操作的内容。是的，我找到了如何删除＆＃34;传奇＆＃34;完全，但这会导致我的图表设计中的条形图过高。这是我的示例代码：

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

谢谢！

Answer 1

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

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

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

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

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

1 个答案: