代码之家  ›  专栏  ›  技术社区  ›  Nugzar Gaguliya

如何在Chart.js中删除标签中的颜色

  •  0
  • Nugzar Gaguliya  · 技术社区  · 10 月前

    如何在Chart.js中从标签中删除此颜色?
    我使用的是primerection,但这并没有区别,因为它导入了Chart。JS里面。
    查阅了文档,但找不到应该为它编写配置的地方。
    有一些类型的插件,都可以插入到primerection中

    enter image description here

    2 回复  |  直到 10 月前
        1
  •  2
  •   lynxSven    10 月前

    就像这里的答案一样——> How to remove rectangle box next to the legend text in Chart.js

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

    他的codepen( https://codepen.io/jordanwillis/pen/dvReRQ )显示了结果。如果这是正确答案,请投他赞成票

        2
  •  0
  •   Dung Tran    10 月前

    你可以试试这个:

    • 使用记号或标题选项中的颜色属性更改轴标签的颜色。

    const config = {  
      type: 'bar', // Example chart type  
      data: {  
        labels: ['January', 'February', 'March'],  
        datasets: [{  
          label: 'My Dataset',  
          data: [10, 20, 30],  
          backgroundColor: 'rgba(75, 192, 192, 0.2)',  
          borderColor: 'rgba(75, 192, 192, 1)',  
          borderWidth: 1  
        }]  
      },  
      options: {  
        scales: {  
          x: {  
            ticks: {  
              color: 'black', // Change the color of the x-axis labels  
            },  
            title: {  
              display: true,  
              text: 'Months',  
              color: 'blue' // Change the title color of the x-axis  
            }  
          },  
          y: {  
            ticks: {  
              color: 'black', // Change the color of the y-axis labels  
            },  
            title: {  
              display: true,  
              text: 'Values',  
              color: 'blue' // Change the title color of the y-axis  
            }  
          }  
        }  
      }  
    };  
    
    const myChart = new Chart(ctx, config);
    • 调整legend.labels选项中的颜色属性,以更改或删除图例标签的颜色。

    options: {  
      plugins: {  
        legend: {  
          labels: {  
            color: 'transparent', // Makes the legend labels transparent  
          }  
        }  
      }  
    }

    希望这项工作