Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

334
Views
Diagrama de árbol de Highchart: bordes redondeados

Necesito crear un mapa de árbol con esquinas redondeadas como se muestra en la imagen.

Diagrama de árbol con esquinas redondeadas

Yo he tratado:

  • Cambiar plotOptions.treemap.borderRadius establece el radio para cada cuadro en lugar de todo el gráfico.

  • El uso de chart.borderRadius no tiene impacto en el gráfico, creo que es así porque el gráfico en sí no va hasta el borde del gráfico.

  • La biblioteca de esquinas redondeadas de highcharts no funciona con diagramas de árbol. Funciona bien con gráficos de barras.

Cualquier dirección sobre cómo lograr esto es apreciada. Aquí hay un jsfiddle de treemap como referencia.

Aquí hay opciones que he probado

 const options = { chart: { borderRadius: 20, }, credits: { enabled: false, }, tooltip: { enabled: false, }, plotOptions: { treemap: { // borderRadiusBottomRight: 25, // borderRadiusBottomLeft: 25, borderWidth: 2, borderRadius: 5, borderColor: "#FFFFFF", }, }, series: [ { type: "treemap", data: [{ id: 'A', name: 'Apples', color: "#EC2500", value: 10, }, { id: 'B', name: 'Bananas', color: "#ECE100", value: 15, }, { id: 'C', name: 'Oranges', color: '#EC9800', value: 20, }], }, ], title: { text: "", }, }, };

Nota:

  1. La leyenda o el título no son necesarios en el gráfico, el gráfico puede extenderse hasta los bordes si es posible
  2. Todos los demás gráficos están hechos con gráficos altos, preferiría hacer el mapa de árbol con el mismo en lugar de usar una biblioteca diferente para ello.
  3. No se requiere desglose.
about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

Puede agregar un clip-path a la clase highcharts-series .

 .highcharts-series { clip-path: inset(0% 0% 0% 0% round 15px); }

https://jsfiddle.net/mqo78ah2/

Tendrá que hacer que el css sea más específico, para que no cambie sus otros gráficos.

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!