Company logo
  • Empleos
  • Bootcamp
  • Acerca de nosotros
  • Para profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
    • Bootcamp
  • Para empresas
    • Inicio
    • Nuestro proceso
    • Planes
    • Pruebas
    • Nómina
    • Blog
    • Comercial
    • Calculadora

0

59
Vistas
How do I customize link style for each data link in a Highcharts network graph?

I'm building a Network Graph meant to show interactions between devices and people in an IoT context.

The data for the graph's series is pulled from a database. Aside from the sender and receiver end of the communication, and a label naming each interaction, there are characterizations for each link, such as the "relationship" between the parties (emotional, worklike, etc.) and the type of communication (to get information, to perform an action, etc.). Therefore, the data (with keys ['from', 'to', 'label','communication type','relationship']) could look something like :

[['Jane','Michael','ComHum1','Pragmatic','Emotional'],
    ['Michael','TV','ComObj1','Action','Object-Owner']]

What I want to do is change the link style (dash, dot, and so on) depending on one factor, and the link color depending on another. That way, between two nodes, each identified as a party in communication, a link is visible which style can denote the type of contact, and which color indicates the relation between them.

The issue with this approach is that, even with styled mode, the only way to style the lines that I can spot in documentation is a CSS selector based on separating different series. This solution cannot work as all the data I want to picture is gathered in a single, connected series, and the customization can only be done based on the specific parameters of each element of the data array. If I were to break it into multiple series, the global network would no longer be visible, which would defeat the purpose of individually styling the links altogether.

Is my approach possible at all in HighCharts ? A very cumbersome workaround I thought about at first was to target each path element in the SVG, but even that doesn't seem possible as they do not seem to be given specific identifiers.

7 months ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

Data links are defined as points in the networkgraph series, you can customize each of them in a few ways.

  1. Add additional key to the keys array, like color and next add prefered color for particular data - demo: https://jsfiddle.net/BlackLabel/p9wy1u02/

  2. You can update each point in the load callback - 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

7 months ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos