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.