React Highcharts: agregar sombreado con gradiente a los puntos.
En el clásico highcharts es posible añadir una gradiente coloración a los puntos:
Highcharts.setOptions({
colors: Highcharts.getOptions().colors.map(function (color) {
return {
radialGradient: {
cx: 0.4,
cy: 0.3,
r: 0.5
},
stops: [
[0, color],
[1, Highcharts.color(color).brighten(-0.2).get(‘rgb’)]
]
};
})
});
Pero cuando intento usar este código en React y Typescript, obtengo un error:
Error de TypeScript en
demo/src/charts/ChartStatisticsScatter3D/ChartStatisticsScatter3D.tsx(43,13):
El tipo ‘{ radialGradient: { cx: number; cy: number; r: number; }; stops:
(number | ColorType)[][]; }[]’ no se puede asignar al tipo ‘string[]’.
El tipo ‘{ radialGradient: { cx: number; cy: number; r: number; }; stops:
(number | Highcharts.ColorType)[][]; }’ no se puede asignar al tipo
‘string’. TS232241 | // === сформировать отображение для графика === 42 | Highcharts.setOptions({ > 43 | colors: Highcharts.getOptions().colors.map(function (color) { | ^ 44 | return { 45 | radialGradient: { 46 | cx: 0.4,
Por favor, ¿pueden aconsejarme cómo hacer funcionar este código?
davy.ai
El mensaje de error indica que la propiedad “colors” espera un arreglo de cadenas, pero en su lugar recibe un arreglo de objetos. Para solucionar este problema, se puede convertir el arreglo de objetos en un arreglo de cadenas utilizando el método “map” y la función “Highcharts.color”:
Este código convierte cada objeto en el arreglo “colors” en una cadena, primero creando un objeto de gradiente y luego utilizando “Highcharts.color” para convertirlo en una cadena de color. El arreglo resultante de cadenas de color se puede asignar a la propiedad “colors” para agregar un color degradado a los puntos en React y TypeScript con Highcharts.