Saltar al contenido

¿Cómo cambio el color de los gráficos ng2?

Si encuentras algo que no entiendes nos puedes dejar un comentario y te responderemos lo más rápido posible.

Solución:

También puedes hacerlo de esta manera:


y

public chartColors: any[] = [
       
        backgroundColor:["#FF7360", "#6FC8CE", "#FAFFF2", "#FFFCC4", "#B9E8E0"] 
      ];

Deberías hacer esto como:

  public chartColors: Array = [
     // first color
      backgroundColor: 'rgba(225,10,24,0.2)',
      borderColor: 'rgba(225,10,24,0.2)',
      pointBackgroundColor: 'rgba(225,10,24,0.2)',
      pointBorderColor: '#fff',
      pointHoverBackgroundColor: '#fff',
      pointHoverBorderColor: 'rgba(225,10,24,0.2)'
    ,
     // second color
      backgroundColor: 'rgba(225,10,24,0.2)',
      borderColor: 'rgba(225,10,24,0.2)',
      pointBackgroundColor: 'rgba(225,10,24,0.2)',
      pointBorderColor: '#fff',
      pointHoverBackgroundColor: '#fff',
      pointHoverBorderColor: 'rgba(225,10,24,0.2)'
    ];

Gris El color está configurado de forma predeterminada, lo que significa que sus opciones de color no funcionan debido a nombres de propiedades incorrectos.

Aquí tienes un ejemplo, como se llaman las propiedades de los colores:

ng2-charts-github-código-fuente

@ACTUALIZAR:

Si es necesario actualizar solo backgroundColor y nada más, el código a continuación también funcionará.

public chartColors: Array = [
     // all colors in order
      backgroundColor: ['#d13537', '#b000b5', '#coffee', ...]
    
]

//.ts_file     

    public chartColors() 
            return [
              backgroundColor: this.alert.severityColor,
              borderColor: 'rgba(225,10,24,0.2)',
              pointBackgroundColor: 'rgba(225,10,24,0.2)',
              pointBorderColor: '#fff',
              pointHoverBackgroundColor: '#fff',
              pointHoverBorderColor: 'rgba(225,10,24,0.2)'
          ]
        


//.html_file

Necesitaba cambiar el color de los gráficos dinámicamente en función de los valores y colores adjuntos a las alertas. Descubrí que @uluo tenía una gran respuesta. Lo cambié de una propiedad de la clase a una función y devolví el objeto con los colores establecidos en elementos dinámicos en mis alertas. Luego usé la función para vincular los colores de mi gráfico y fue mágico. ¡Había estado atascado en este problema durante un par de horas!

¡Espero que esto ayude a cualquiera que intente pasar valores dinámicos a gráficos ng2 con Angular!

Aquí tienes las reseñas y puntuaciones

Al final de todo puedes encontrar las explicaciones de otros gestores de proyectos, tú de igual forma eres capaz mostrar el tuyo si dominas el tema.

¡Haz clic para puntuar esta entrada!
(Votos: 2 Promedio: 4.5)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *