Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

106
Visualizações
Crear patrón en colores RGB

Actualmente estoy usando Apexcharts para mostrar una serie de datos. En una de las opciones, puedo seleccionar una matriz de colores como se define en la documentación , que es una matriz de cadenas. Obviamente, pasar cadenas hexadecimales funciona bien.

Sin embargo, lo que estoy tratando de hacer ahora es que mi serie de datos en mi gráfico se muestre con patrones. Entiendo que puedo usar el objeto de fill como se define aquí , pero eso definiría un patrón para todo el gráfico, mientras que me gustaría definirlo solo para ciertos datos.

Dado que la matriz de color es una matriz de cadenas, ¿hay alguna forma en la que pueda definir algo como linear-gradient o algo equivalente pero en formato de cadena?

EDITAR:

Como ejemplo, supongamos que tengo esta serie de datos del sitio web de Apexchart. ¿Hay alguna manera de establecer una condición, por ejemplo, si la persona es 'Joe' y el tipo es 'prueba', luego establecer el gradiente para que sea algo (por ejemplo gradient: slantedLines )?

Por lo tanto, el resultado sería algo como: ingrese la descripción de la imagen aquí

EDIT2:

También he visto otra pregunta en la que podemos especificar la propiedad fillColor para especificar el color de una barra determinada en esta publicación . ¿Hay un equivalente para establecer explícitamente el gradiente?

about 4 years ago · Juan Pablo Isaza
1 Respostas
Responde à pergunta

0

La pregunta necesita alguna aclaración, pero esta parece ser la respuesta más lógica:

Parte 1

En un gráfico de varias series, puede pasar una matriz para permitir una combinación de tipos de relleno como este:

 fill: { // All series use same type: gradient. type: 'gradient' } /* OR */ fill: { // Series alternate between solid type and gradient type. type: ['solid', 'gradient'] }

Parte 2

Luego, si desea que cada degradado use colores diferentes, páselos como matrices en fill.colors y fill.gradient.gradientToColors (Necesita dos matrices diferentes porque los degradados pasan de un color de "inicio" a un color de "final" diferente. )

gradientToColors: Array

Colores opcionales a los que finaliza el degradado. La matriz de colores principal se convierte en el gradienteDeColores y esta matriz se convierte en los colores finales del degradado. Cada índice en la matriz corresponde al índice de serie.

Lo anterior es una explicación de cómo especificar:

  1. Un tipo de relleno (sólido, degradado, patrón, imagen) para todos los valores de cada serie. (Las dos series del ejemplo vinculado son azul 'Bob' y verde 'Joe').
  2. Cuando el tipo de relleno es degradado: los colores de inicio/fin para cada valor en una serie. (Los tres valores diferentes de la serie azul 'Bob' son '3 días', '3 días' y '5 días').

La pregunta es ambigua y puede estar solicitando algo más (que es posible que ApexCharts ni siquiera la admita). Si lo anterior no respondió a la pregunta, sugiero agregar una imagen de muestra de la salida del gráfico deseado.

Actualización: cómo cambiar el patrón ('gradiente' y 'patrón' son dos tipos diferentes de rellenos: slantedLines es un patrón, no un degradado).

Las siguientes opciones hacen que los valores segundo y tercero usen patrones (no se repite como supuse).

 ... ... fill: { type: ["solid", "pattern", "pattern"], pattern: { style: "slantedLines" } } ... ...

Sandbox de código modificado :

ingrese la descripción de la imagen aquí

about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda