3

Estoy realizando un gráfico con la librería Plot.ly de tipo Sunburst y tengo un problema que no logro resolver, el gráfico tiene tres tipos de elementos:

  • Padres
  • Hijos
  • Nietos

Entre padres e hijos no existe ningún conflicto, pero los nietos es otra cosa, los hijos están asignados a un padre y son únicos, pero los nietos pueden estar asignados a varios padres y repetirse varias veces por padre, entonces, al mostrarse solo aparecen una vez en un padre en vez de los varios a los que está asignado, otro problema es que cada nieto se puede repetir n veces, que representa el porcentaje de ocupación del padre, para esto tengo solución pero sin solucionar el primer problema es imposible aplicarlo.

Dejo un fiddle con el gráfico actual.

var obj = [{Id:null,Padre:"",Nombre:null},{Id:"246L",Padre:"",Nombre:"MEG"},{Id:"234L",Padre:"",Nombre:"KNIFE DRIVE"},{Id:"247P",Padre:"234L",Nombre:"MONTAJE GEN II"},{Id:"248P",Padre:"234L",Nombre:"PREMONTAJES GEN II"},{Id:"366P",Padre:"246L",Nombre:"MONTAJE FINAL"},{Id:"50132",Padre:"247P",Nombre:"DE21086"},{Id:"50132",Padre:"247P",Nombre:"DE21086"},{Id:"50132",Padre:"247P",Nombre:"DE21086"},{Id:"50132",Padre:"247P",Nombre:"DE21086"},{Id:"50132",Padre:"247P",Nombre:"DE21086"},{Id:"50132",Padre:"247P",Nombre:"DE21086"},{Id:"50132",Padre:"247P",Nombre:"DE21086"},{Id:"50132",Padre:"247P",Nombre:"DE21086"},{Id:"50132",Padre:"247P",Nombre:"DE21086"},{Id:"50132",Padre:"247P",Nombre:"DE21086"},{Id:"50132",Padre:"247P",Nombre:"DE21086"},{Id:"50132",Padre:"247P",Nombre:"DE21086"},{Id:"50132",Padre:"247P",Nombre:"DE21086"},{Id:"50132",Padre:"247P",Nombre:"DE21086"},{Id:"50132",Padre:"247P",Nombre:"DE21086"},{Id:"50132",Padre:"247P",Nombre:"DE21086"},{Id:"50132",Padre:"247P",Nombre:"DE21086"},{Id:"50132",Padre:"247P",Nombre:"DE21086"},{Id:"50132",Padre:"247P",Nombre:"DE21086"},{Id:"50132",Padre:"247P",Nombre:"DE21086"},{Id:"50132",Padre:"247P",Nombre:"DE21086"},{Id:"82510",Padre:"247P",Nombre:"DE32087"},{Id:"82510",Padre:"247P",Nombre:"DE32087"},{Id:"82510",Padre:"247P",Nombre:"DE32087"},{Id:"82510",Padre:"247P",Nombre:"DE32087"},{Id:"82510",Padre:"247P",Nombre:"DE32087"},{Id:"82510",Padre:"247P",Nombre:"DE32087"},{Id:"82510",Padre:"247P",Nombre:"DE32087"},{Id:"82510",Padre:"247P",Nombre:"DE32087"},{Id:"82510",Padre:"247P",Nombre:"DE32087"},{Id:"82511",Padre:"247P",Nombre:"DE32198"},{Id:"82511",Padre:"247P",Nombre:"DE32198"},{Id:"82511",Padre:"247P",Nombre:"DE32198"},{Id:"82511",Padre:"247P",Nombre:"DE32198"},{Id:"82511",Padre:"247P",Nombre:"DE32198"},{Id:"50132",Padre:"248P",Nombre:"DE21086"},{Id:"50132",Padre:"248P",Nombre:"DE21086"},{Id:"50132",Padre:"248P",Nombre:"DE21086"},{Id:"50132",Padre:"248P",Nombre:"DE21086"},{Id:"50132",Padre:"248P",Nombre:"DE21086"},{Id:"50132",Padre:"248P",Nombre:"DE21086"},{Id:"50132",Padre:"248P",Nombre:"DE21086"},{Id:"50132",Padre:"248P",Nombre:"DE21086"},{Id:"50132",Padre:"248P",Nombre:"DE21086"},{Id:"50132",Padre:"248P",Nombre:"DE21086"},{Id:"50132",Padre:"248P",Nombre:"DE21086"},{Id:"50132",Padre:"248P",Nombre:"DE21086"},{Id:"50132",Padre:"248P",Nombre:"DE21086"},{Id:"50132",Padre:"248P",Nombre:"DE21086"},{Id:"50132",Padre:"248P",Nombre:"DE21086"},{Id:"50132",Padre:"248P",Nombre:"DE21086"},{Id:"50132",Padre:"248P",Nombre:"DE21086"},{Id:"50132",Padre:"248P",Nombre:"DE21086"},{Id:"50132",Padre:"248P",Nombre:"DE21086"},{Id:"50132",Padre:"248P",Nombre:"DE21086"},{Id:"50132",Padre:"248P",Nombre:"DE21086"},{Id:"50132",Padre:"248P",Nombre:"DE21086"},{Id:"50132",Padre:"248P",Nombre:"DE21086"},{Id:"50132",Padre:"248P",Nombre:"DE21086"},{Id:"82510",Padre:"248P",Nombre:"DE32087"},{Id:"82510",Padre:"248P",Nombre:"DE32087"},{Id:"82510",Padre:"248P",Nombre:"DE32087"},{Id:"82510",Padre:"248P",Nombre:"DE32087"},{Id:"82510",Padre:"248P",Nombre:"DE32087"},{Id:"82510",Padre:"248P",Nombre:"DE32087"},{Id:"82510",Padre:"248P",Nombre:"DE32087"},{Id:"82510",Padre:"248P",Nombre:"DE32087"},{Id:"82510",Padre:"248P",Nombre:"DE32087"},{Id:"82511",Padre:"248P",Nombre:"DE32198"},{Id:"82511",Padre:"248P",Nombre:"DE32198"},{Id:"82511",Padre:"248P",Nombre:"DE32198"},{Id:"83552",Padre:"366P",Nombre:"DE32235"},{Id:"83553",Padre:"366P",Nombre:"DE32333"},{Id:"83553",Padre:"366P",Nombre:"DE32333"},{Id:"83553",Padre:"366P",Nombre:"DE32333"},{Id:"83553",Padre:"366P",Nombre:"DE32333"},{Id:"83553",Padre:"366P",Nombre:"DE32333"},{Id:"83553",Padre:"366P",Nombre:"DE32333"},{Id:"83553",Padre:"366P",Nombre:"DE32333"},{Id:"83553",Padre:"366P",Nombre:"DE32333"},{Id:"83553",Padre:"366P",Nombre:"DE32333"}];

//VARIABLES
var ids = [];
var nombres = [];
var padres = [];
var colores = [];
var nLineas = 0;

//FUNCIONES
function rgba2hex(orig) {
  var a, isPercent,
      rgb = orig.replace(/\s/g, '').match(/^rgba?\((\d+),(\d+),(\d+),?([^,\s)]+)?/i),
      alpha = (rgb && rgb[4] || "").trim(),
      hex = rgb ?
      (rgb[1] | 1 << 8).toString(16).slice(1) +
      (rgb[2] | 1 << 8).toString(16).slice(1) +
      (rgb[3] | 1 << 8).toString(16).slice(1) : orig;

  if (alpha !== "") {
    a = alpha;
  } else {
    a = 01;
  }
  // multiply before convert to HEX
  a = ((a * 255) | 1 << 8).toString(16).slice(1)
  hex = hex + a;

  return hex;
}

function random_rgba() {
  var o = Math.round, r = Math.random, s = 255;
  return 'rgba(' + o(r() * s) + ',' + o(r() * s) + ',' + o(r() * s) + ',' + 0.7 + ')';
}

function SplitDatos(datos) {
  
  $.each(datos, function (index, value) {
    ids.push(value.Id);
    padres.push(value.Padre);
    nombres.push(value.Nombre);				
  });

}

$(document).ready(function(){

  SplitDatos(obj);

  var data = [{
    type: "sunburst",
    ids: ids,
    labels: nombres,
    parents: padres,
    outsidetextfont: { size: 20, color: "#377eb8" },
    textposition: 'inside',
    insidetextorientation: 'tangential',
    // leaf: {opacity: 0.4},
    marker: { line: { width: 2 } },
  }];

  for (var i = 0; i < nLineas; i++) {
    var colorRGB = random_rgba();
    colores.push(rgba2hex(colorRGB));
  }

  var layout = {
    margin: { l: 0, r: 0, b: 0, t: 0 },
    sunburstcolorway: colores,
  };

  //console.log("Pinto el circulo");
  Plotly.newPlot('Pie', data, layout);    

});
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='Pie'><!-- Plotly chart will be drawn inside this DIV --></div>

1
  • Según veo como lo planteas, quizá lo más apropiado sea repetir los nietos, y que se diferencien en que hijo tienen asignado...
    – Fergush
    Commented el 12 feb. 2020 a las 11:28

1 respuesta 1

4

Te falla porque tienes elementos repetidos y en lugar de ignorarlos completamente, los usa para calcular el ancho: si tienes 10 veces un elemento, aparecerá una vez pero con 1/10 de la anchura que debería:

var obj = [
  {Id:null,Padre:"",Nombre:null},{Id:"246L",Padre:"",Nombre:"MEG"},
  {Id:"234L",Padre:"",Nombre:"KNIFE DRIVE"},{Id:"247P",Padre:"234L",Nombre:"MONTAJE GEN II"},
  {Id:"248P",Padre:"234L",Nombre:"PREMONTAJES GEN II"},
  {Id:"366P",Padre:"246L",Nombre:"MONTAJE FINAL"},
  {Id:"50132",Padre:"247P",Nombre:"DE21086"},
  {Id:"82510",Padre:"247P",Nombre:"DE32087"},
  {Id:"82511",Padre:"247P",Nombre:"DE32198"},
  {Id:"50132",Padre:"248P",Nombre:"DE21086"},
  {Id:"83552",Padre:"366P",Nombre:"DE32235"},
  {Id:"83553",Padre:"366P",Nombre:"DE32333"}];

//VARIABLES
var ids = [];
var nombres = [];
var padres = [];
var colores = [];
var nLineas = 0;

//FUNCIONES
function rgba2hex(orig) {
  var a, isPercent,
      rgb = orig.replace(/\s/g, '').match(/^rgba?\((\d+),(\d+),(\d+),?([^,\s)]+)?/i),
      alpha = (rgb && rgb[4] || "").trim(),
      hex = rgb ?
      (rgb[1] | 1 << 8).toString(16).slice(1) +
      (rgb[2] | 1 << 8).toString(16).slice(1) +
      (rgb[3] | 1 << 8).toString(16).slice(1) : orig;

  if (alpha !== "") {
    a = alpha;
  } else {
    a = 01;
  }
  // multiply before convert to HEX
  a = ((a * 255) | 1 << 8).toString(16).slice(1)
  hex = hex + a;

  return hex;
}

function random_rgba() {
  var o = Math.round, r = Math.random, s = 255;
  return 'rgba(' + o(r() * s) + ',' + o(r() * s) + ',' + o(r() * s) + ',' + 0.7 + ')';
}

function SplitDatos(datos) {
  
  $.each(datos, function (index, value) {
    ids.push(value.Id);
    padres.push(value.Padre);
    nombres.push(value.Nombre);				
  });

}

$(document).ready(function(){

  SplitDatos(obj);

  var data = [{
    type: "sunburst",
    ids: ids,
    labels: nombres,
    parents: padres,
    outsidetextfont: { size: 20, color: "#377eb8" },
    textposition: 'inside',
    insidetextorientation: 'tangential',
    // leaf: {opacity: 0.4},
    marker: { line: { width: 2 } },
  }];

  for (var i = 0; i < nLineas; i++) {
    var colorRGB = random_rgba();
    colores.push(rgba2hex(colorRGB));
  }

  var layout = {
    margin: { l: 0, r: 0, b: 0, t: 0 },
    sunburstcolorway: colores,
  };

  //console.log("Pinto el circulo");
  Plotly.newPlot('Pie', data, layout);    

});
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='Pie'><!-- Plotly chart will be drawn inside this DIV --></div>

Una solución es agrupar los repetidos y añadir el número de repeticiones como valor en el gráfico:

var obj = [
{Id:null,Padre:"",Nombre:null},
{Id:"246L",Padre:"",Nombre:"MEG"},
{Id:"234L",Padre:"",Nombre:"KNIFE DRIVE"},
{Id:"247P",Padre:"234L",Nombre:"MONTAJE GEN II"},
{Id:"248P",Padre:"234L",Nombre:"PREMONTAJES GEN II"},
{Id:"366P",Padre:"246L",Nombre:"MONTAJE FINAL"},
{Id:"50132",Padre:"247P",Nombre:"DE21086"},
{Id:"50132",Padre:"247P",Nombre:"DE21086"},
{Id:"50132",Padre:"247P",Nombre:"DE21086"},
{Id:"50132",Padre:"247P",Nombre:"DE21086"},
{Id:"50132",Padre:"247P",Nombre:"DE21086"},
{Id:"50132",Padre:"247P",Nombre:"DE21086"},
{Id:"50132",Padre:"247P",Nombre:"DE21086"},
{Id:"50132",Padre:"247P",Nombre:"DE21086"},
{Id:"50132",Padre:"247P",Nombre:"DE21086"},
{Id:"50132",Padre:"247P",Nombre:"DE21086"},
{Id:"50132",Padre:"247P",Nombre:"DE21086"},
{Id:"50132",Padre:"247P",Nombre:"DE21086"},
{Id:"50132",Padre:"247P",Nombre:"DE21086"},
{Id:"50132",Padre:"247P",Nombre:"DE21086"},
{Id:"50132",Padre:"247P",Nombre:"DE21086"},
{Id:"50132",Padre:"247P",Nombre:"DE21086"},
{Id:"50132",Padre:"247P",Nombre:"DE21086"},
{Id:"50132",Padre:"247P",Nombre:"DE21086"},
{Id:"50132",Padre:"247P",Nombre:"DE21086"},
{Id:"50132",Padre:"247P",Nombre:"DE21086"},
{Id:"50132",Padre:"247P",Nombre:"DE21086"},
{Id:"82510",Padre:"247P",Nombre:"DE32087"},
{Id:"82510",Padre:"247P",Nombre:"DE32087"},
{Id:"82510",Padre:"247P",Nombre:"DE32087"},
{Id:"82510",Padre:"247P",Nombre:"DE32087"},
{Id:"82510",Padre:"247P",Nombre:"DE32087"},
{Id:"82510",Padre:"247P",Nombre:"DE32087"},
{Id:"82510",Padre:"247P",Nombre:"DE32087"},
{Id:"82510",Padre:"247P",Nombre:"DE32087"},
{Id:"82510",Padre:"247P",Nombre:"DE32087"},
{Id:"82511",Padre:"247P",Nombre:"DE32198"},
{Id:"82511",Padre:"247P",Nombre:"DE32198"},
{Id:"82511",Padre:"247P",Nombre:"DE32198"},
{Id:"82511",Padre:"247P",Nombre:"DE32198"},
{Id:"82511",Padre:"247P",Nombre:"DE32198"},
{Id:"50132",Padre:"248P",Nombre:"DE21086"},
{Id:"50132",Padre:"248P",Nombre:"DE21086"},
{Id:"50132",Padre:"248P",Nombre:"DE21086"},
{Id:"50132",Padre:"248P",Nombre:"DE21086"},
{Id:"50132",Padre:"248P",Nombre:"DE21086"},
{Id:"50132",Padre:"248P",Nombre:"DE21086"},
{Id:"50132",Padre:"248P",Nombre:"DE21086"},
{Id:"50132",Padre:"248P",Nombre:"DE21086"},
{Id:"50132",Padre:"248P",Nombre:"DE21086"},
{Id:"50132",Padre:"248P",Nombre:"DE21086"},
{Id:"50132",Padre:"248P",Nombre:"DE21086"},
{Id:"50132",Padre:"248P",Nombre:"DE21086"},
{Id:"50132",Padre:"248P",Nombre:"DE21086"},
{Id:"50132",Padre:"248P",Nombre:"DE21086"},
{Id:"50132",Padre:"248P",Nombre:"DE21086"},
{Id:"50132",Padre:"248P",Nombre:"DE21086"},
{Id:"50132",Padre:"248P",Nombre:"DE21086"},
{Id:"50132",Padre:"248P",Nombre:"DE21086"},
{Id:"50132",Padre:"248P",Nombre:"DE21086"},
{Id:"50132",Padre:"248P",Nombre:"DE21086"},
{Id:"50132",Padre:"248P",Nombre:"DE21086"},
{Id:"50132",Padre:"248P",Nombre:"DE21086"},
{Id:"50132",Padre:"248P",Nombre:"DE21086"},
{Id:"50132",Padre:"248P",Nombre:"DE21086"},
{Id:"82510",Padre:"248P",Nombre:"DE32087"},
{Id:"82510",Padre:"248P",Nombre:"DE32087"},
{Id:"82510",Padre:"248P",Nombre:"DE32087"},
{Id:"82510",Padre:"248P",Nombre:"DE32087"},
{Id:"82510",Padre:"248P",Nombre:"DE32087"},
{Id:"82510",Padre:"248P",Nombre:"DE32087"},
{Id:"82510",Padre:"248P",Nombre:"DE32087"},
{Id:"82510",Padre:"248P",Nombre:"DE32087"},
{Id:"82510",Padre:"248P",Nombre:"DE32087"},
{Id:"82511",Padre:"248P",Nombre:"DE32198"},
{Id:"82511",Padre:"248P",Nombre:"DE32198"},
{Id:"82511",Padre:"248P",Nombre:"DE32198"},
{Id:"83552",Padre:"366P",Nombre:"DE32235"},
{Id:"83553",Padre:"366P",Nombre:"DE32333"},
{Id:"83553",Padre:"366P",Nombre:"DE32333"},
{Id:"83553",Padre:"366P",Nombre:"DE32333"},
{Id:"83553",Padre:"366P",Nombre:"DE32333"},
{Id:"83553",Padre:"366P",Nombre:"DE32333"},
{Id:"83553",Padre:"366P",Nombre:"DE32333"},
{Id:"83553",Padre:"366P",Nombre:"DE32333"},
{Id:"83553",Padre:"366P",Nombre:"DE32333"},
{Id:"83553",Padre:"366P",Nombre:"DE32333"}];

let count = {};
obj = obj.filter(elem => {
  if (count[elem.Id] === undefined) {
    count[elem.Id]=1;
    return true;
  } else {
    count[elem.Id]++;
    return false;
  }
});

obj.forEach(elem => elem.Repetido = count[elem.Id]);

function unpack(rows, key) {
  return rows.map(function(row) { return row[key]; });
}





//VARIABLES
var colores = [];
var nLineas = 0;

//FUNCIONES
function rgba2hex(orig) {
  var a, isPercent,
      rgb = orig.replace(/\s/g, '').match(/^rgba?\((\d+),(\d+),(\d+),?([^,\s)]+)?/i),
      alpha = (rgb && rgb[4] || "").trim(),
      hex = rgb ?
      (rgb[1] | 1 << 8).toString(16).slice(1) +
      (rgb[2] | 1 << 8).toString(16).slice(1) +
      (rgb[3] | 1 << 8).toString(16).slice(1) : orig;

  if (alpha !== "") {
    a = alpha;
  } else {
    a = 01;
  }
  // multiply before convert to HEX
  a = ((a * 255) | 1 << 8).toString(16).slice(1)
  hex = hex + a;

  return hex;
}

function random_rgba() {
  var o = Math.round, r = Math.random, s = 255;
  return 'rgba(' + o(r() * s) + ',' + o(r() * s) + ',' + o(r() * s) + ',' + 0.7 + ')';
}

$(document).ready(function(){

  var data = [{
    type: "sunburst",
    ids: unpack(obj,'Id'),
    labels: unpack(obj,'Nombre'),
    parents: unpack(obj,'Padre'),
    values: unpack(obj,'Repetido'),
    outsidetextfont: { size: 20, color: "#377eb8" },
    textposition: 'inside',
    insidetextorientation: 'tangential',
    
    marker: { line: { width: 2 } }
  }];

  for (var i = 0; i < nLineas; i++) {
    var colorRGB = random_rgba();
    colores.push(rgba2hex(colorRGB));
  }

  var layout = {
    margin: { l: 0, r: 0, b: 0, t: 0 },
    sunburstcolorway: colores,
  };

  //console.log("Pinto el circulo");
  Plotly.newPlot('Pie', data, layout);    

});
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='Pie'><!-- Plotly chart will be drawn inside this DIV --></div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.