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>