Necesito construir un gráfico sankey de highcharts.js para que se parezca al de la imagen de ejemplo, básicamente lo que trato de hacer es cambiar la forma y la posición de algunos flujos y nodos en el gráfico. La ayuda será apreciada ya que no puedo encontrar ninguna solución en Internet.
Highcharts.chart('container', {...});Aquí hay un truco feo que puede hacer lo que necesitas. No tuve tiempo de terminarlo correctamente, pero funciona.
Lo que puede hacer ahora es configurar las opciones de entrada y salida del nodo y jugar con el desplazamiento vertical-horizontal.
nodes=[ {id:'import' ,column:1, offsetVertical:-100 ,offsetHorizontal:-20}, {id:'production',column:0, offsetVertical:22 ,offsetHorizontal:0}, {id:'total' ,column:2, offsetVertical:0 ,offsetHorizontal:0}, {id:'loss' ,column:3, offsetVertical:50 ,offsetHorizontal:0}, {id:'final' ,column:5, offsetVertical:-10 ,offsetHorizontal:0}, {id:'export' ,column:4, offsetVertical:50 ,offsetHorizontal:0}, ] Highcharts.chart('container', { chart: { height: (9/16 * 90 )+ "%" }, series: [{ keys: ['from', 'to', 'weight'], data: [{ from: 'import', to: 'total', weight: 80, incoming: true }, { from: 'production', to: 'total', weight: 20, }, { from: 'total', to: 'final', weight: 56, }, { from: 'total', to: 'export', weight: 17, outgoing: true }, { from: 'total', to: 'loss', weight: 27, outgoing: true }], dataLabels: { nodeFormat: '{point.name}: {point.sum}%', padding: 20, style: { fontSize: '0.8em' } }, nodes: nodes, type: 'sankey', name: 'Energy', linkOpacity: 1, }] });Aquí está el enlace del violín
Cambié sankey.js directamente y también usé la opción de traducción proto. Principales cambios:
En relación con sankey, esta serie tiene algunas limitaciones, para ajustar puede usar nodeWidth ,nodePadding y minLinkWidth .
Los nodos se generan para que se visualice el peso total que entra o sale de un nodo. Los nodos son instancias de Point y están disponibles en la matriz series.nodes. El ancho de los nodos se puede establecer con la opción nodeWidth y el relleno entre ellos con nodePadding.
https://www.highcharts.com/docs/chart-and-series-types/sankey-diagram#nodes