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

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

转载作者：行者123 更新时间：2023-12-01 02:09:53

25

4

在本例中，我试图删除图表中“图例”文本“分数列表”左侧的小矩形框。我在文档中找不到任何显示如何执行此操作的内容。是的，我找到了如何完全删除“图例”，但这会导致我的图表设计中的条形图过高。这是我的示例代码:

     <!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 here 中有记录)。这是codepen示例。

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

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

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

关于javascript - 如何删除 Chart.js 中图例文本旁边的矩形框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42768494/

25

4

0

文章推荐： jquery - 获取href值，然后将其作为id查找

文章推荐： JavaScript:确保表单值唯一，Java Spring Rest 作为后端

文章推荐： <script> 标签中的 Javascript 变量

html - 图例中的 header 有效吗？ <图例>
标题

我在 visual studio 中使用它，但编译器声称 h1 不能嵌套在 legend 元素中，但浏览器无论如何都可以呈现它，所以我很困惑这是有效的还是不是？ Caption
【matplotlib基础】--图例
Matplotlib 中的图例是帮助观察者理解图像数据的重要工具。图例通常包含在图像中，用于解释不同的颜色、形状、标签和其他元素. 1. 主要参数当不设置图例的参数时，默认的图例是这样的.
mongoDB分页的两种方法(图例)
mongoDB分页的两种方法 mongoDB的分页查询是通过limit(),skip(),sort()这三个函数组合进行分页查询的下面这个是我的测试数据第一种方法查询第一页的数据：db.te
正则表达式清理我的 Grafana 图例
我的 grafana 仪表板图例中有这些名称: stats.gauges.all.cloudwatch.communicationapi.dynamodb.ca_communicationapi_re
每个句柄具有不同数量和颜色标记的 Matplotlib 图例
鉴于以下情况: import pandas as pd import matplotlib.pyplot as plt d=pd.DataFrame({'category':['a','a','a',
python - 图例 - 获取标签
我收到此错误，请问出了什么问题？ plt.legend(handles=[d1, d2]) File "/usr/lib/python3/dist-packages/matplotlib/pypl
python - 向直方图添加图例/图例
这个问题已经有答案了: python matplotlib: label in histogram (1 个回答) 已关闭 5 年前。我无法向使用 matplotlib.pyplot 创建的直方图添
javascript - 谷歌图表 - 图例
我想更改我的图例，我必须删除分页并将所有标题放在一两行中。我想更改图标。现在是这个样子我想要这样的东西我输入了 scrollArrows: 'none' 但它不起作用。这是我在 Controll
FOR 循环后的 Matlab 图例
我正在创建一个文件来读取一定数量的 .wav 文件，每个文件对应一个音符。我正在对它们中的每一个执行 FFT，并将它们全部绘制在同一个图形上。但是，我在正确打印图例时遇到了问题，它将我想要使用的名称分
r - 格式化多个 geom_sf 图例
我正在 ggplot 中处理多个 sf 几何图形，并希望以点、线和正方形(对于多边形)的形式显示图例。然而，geom_sf图例结合了我的几何特征(即结合线和点)如下所示: library(ggplot
r - 具有可变字体系列的 geom_text 图例
我想要 geom_text()标签根据变量采用字体系列。根据 ggplot2 docs 上的示例(向下滚动到底部)，我已经这样做了(与 ggplot 文档示例中的相同): library(ggplo
r - 将自定义数字添加到 ggplot 图例
我正在绘制一个 geom_tile 图，其中每个点都有一个特定的 p-value。图的绘制方式很好，p-value 限制在图例上。我想添加到这个图例的是具有这个 p-value 的数据点的数量。
r - 将条形图添加到 ggplot2 图例
我有以下 data.frame : my.df = data.frame(mean = c(0.045729661,0.030416531,0.043202944,0.025600973,0.0405
r - 将新项目添加到 ggplot2 图例
我正在绘图中打印 Case-Shiller 索引: structure(list(Date = structure(c(10957, 11048, 11139, 11231, 11323, 1141
r - 具有分类数据的栅格 map 图例
我想绘制一个包含 4 个不同值( 1 )的栅格，并带有描述类别的分类文本图例，例如 2但有彩盒: 我试过使用图例，例如: legend( 1,-20,legend = c("land","ocean/
r - 放大 ggplot2 图例
我在 R 中用 ggplot2 制作了这个图由以下代码绘制: ggplot(mtcars) + geom_smooth(fill='grey', alpha=0.3, span=0.1, aes
r - 从两个数据框构建绘图时的 ggplot 图例
我有来自两个不同数据框的数据。我正在尝试为每个数据框创建图例。我知道我可以组合数据框并进行操作，但是由于我的数据源，从两个不同的数据框进行绘图最有意义。请在下面找到简化的示例。我已经接近了，但传说中
javascript - 保存隐藏的 Highcharts 图例
我将 highchart 的图形保存为 svg。 var chart = $('#graphicName').highcharts(); EXPORT_WIDTH = 1000; render_wid
javascript - 将自定义符号设置为 HighCharts 图例
我想将自定义符号设置为图例项。目前我有矩形。我需要带有勾号的矩形(如彩色复选框)。根据文档，我可以自定义元素，例如符号附近的文本。但如果我将绘图上的所有元素都设置为自定义图像 ( Example )
r - 使用表情符号的 ggplot 图例
我有下面的代码，可以生成饼图和图例。有没有办法让表情符号和饼图具有相同的对应颜色，因为目前表情符号是黑色的。另外，我希望删除图例中的方形色 block ，并且术语“男性”和“女性”出现在正确的表情符号

首页

博学

6Ren·AI

商城

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

标题