Estoy creando un gráfico de red destinado a mostrar interacciones entre dispositivos y personas en un contexto de IoT.
Los datos de la serie del gráfico se extraen de una base de datos. Además del extremo emisor y receptor de la comunicación, y una etiqueta que nombra cada interacción, existen caracterizaciones para cada vínculo, como la "relación" entre las partes (emocional, laboral, etc.) y el tipo de comunicación (para obtener información, para realizar una acción, etc.). Por lo tanto, los datos (con claves ['de', 'a', 'etiqueta', 'tipo de comunicación', 'relación']) podrían tener un aspecto similar al siguiente:
[['Jane','Michael','ComHum1','Pragmatic','Emotional'], ['Michael','TV','ComObj1','Action','Object-Owner']]
Lo que quiero hacer es cambiar el estilo del enlace (guión, punto, etc.) según un factor, y el color del enlace según otro. De esa forma, entre dos nodos, cada uno identificado como parte en la comunicación, se ve un vínculo cuyo estilo puede denotar el tipo de contacto, y qué color indica la relación entre ellos.
El problema con este enfoque es que, incluso con el modo de estilo, la única forma de diseñar las líneas que puedo detectar en la documentación es un selector de CSS basado en la separación de diferentes series. Esta solución no puede funcionar ya que todos los datos que quiero imaginar se recopilan en una sola serie conectada, y la personalización solo se puede realizar en función de los parámetros específicos de cada elemento de la matriz de datos. Si tuviera que dividirlo en varias series, la red global ya no sería visible, lo que anularía el propósito de diseñar individualmente los enlaces por completo.
¿Es mi enfoque posible en HighCharts? Una solución muy engorrosa en la que pensé al principio fue apuntar a cada elemento de ruta en el SVG, pero incluso eso no parece posible ya que no parecen tener identificadores específicos.
Los enlaces de datos se definen como puntos en la serie de gráficos de red, puede personalizar cada uno de ellos de varias maneras.
Agregue una clave adicional a la matriz de keys
, como color y luego agregue el color preferido para datos particulares - demostración: https://jsfiddle.net/BlackLabel/p9wy1u02/
Puede actualizar cada punto en la devolución de llamada de carga: https://jsfiddle.net/BlackLabel/vj3Ldbu9/
API: https://api.highcharts.com/highcharts/chart.events.load
API: https://api.highcharts.com/class-reference/Highcharts.Point#update
API: https://api.highcharts.com/highcharts/series.networkgraph.data.color