时间戳

首页 > 解决方案 > 如何为 Highcharts 网络图中的每个数据链接自定义链接样式？

javascript - 如何为 Highcharts 网络图中的每个数据链接自定义链接样式？

问题描述

我正在构建一个网络图，旨在显示物联网环境中设备和人之间的交互。

图表系列的数据是从数据库中提取的。除了通信的发送者和接收者端，以及命名每个交互的标签之外，每个链接都有表征，例如各方之间的“关系”（情感、工作方式等）和通信类型（获取信息、执行操作等）。因此，数据（带有键 ['from'、'to'、'label'、'communication type'、'relationship']）可能类似于：

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

我想要做的是根据一个因素更改链接样式（破折号、点等），并根据另一个因素更改链接颜色。这样，在两个节点之间，每个节点都被标识为通信的一方，链接是可见的，哪种样式可以表示联系的类型，哪种颜色表示它们之间的关系。

这种方法的问题是，即使使用样式模式，我可以在文档中发现的唯一设置线条样式的方法是基于分隔不同系列的 CSS 选择器。此解决方案无法工作，因为我想要描绘的所有数据都收集在一个连接的系列中，并且只能根据数据数组中每个元素的特定参数进行定制。如果我将它分成多个系列，全球网络将不再可见，这将完全破坏单独设置链接样式的目的。

我的方法在 HighCharts 中是否可行？我最初想到的一个非常麻烦的解决方法是针对 SVG 中的每个路径元素，但即使这样似乎也不可能，因为它们似乎没有被赋予特定的标识符。

标签： javascriptcsschartshighcharts

解决方案

数据链接被定义为网络图系列中的点，您可以通过几种方式自定义它们中的每一个。

  1. 向数组添加其他键keys，例如颜色，然后为特定数据添加首选颜色 - 演示：https ://jsfiddle.net/BlackLabel/p9wy1u02/

  2. 您可以更新加载回调中的每个点 - 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

推荐阅读