HighChart networkgraph 自定义关系format 节点format

最近使用neo4j,前端使用highchart做成dashboard,需要用到这些,直接从官网api上来找是没问题,但是就是他的property太多了,找半天,特别是你还不知道那个property叫什么名字的时候.所以总结下,下次就懒得去找了
这个官网api的链接https://api.highcharts.com/highcharts/

自定义关系format 与节点format

series.dataLabels.linkFormatter
series.dataLabels.formatter

首先要先启用datalabel

export const CHART_SRC = {
  chart: {
    type: 'networkgraph',
    height: 800,
    width: 2000
  },
  exporting: {
    enabled: false
  },
  scrollbar: {
    enabled: true
  },
  title: null,
  credits: {
    enabled: false
  },
  plotOptions: {
    networkgraph: {
      keys: ['from', 'to', 'custom'],
      layoutAlgorithm: {
        enableSimulation: false,
        friction: -0.96,
        linkLength: 60
        // integration: 'verlet'
      },
      cursor: 'pointer',
      events: {}
    }
  },
  series: [
    {
      dataLabels: {
        enabled: true,
        linkTextPath: {
          attributes: {
            dy: 12
          }
        },
        // eslint-disable-next-line object-shorthand
        linkFormatter: function () {
          return this.point.options.relationship + '<br>' + this.point.fromNode.id + '\u2192' + this.point.toNode.id;
        },
        // eslint-disable-next-line object-shorthand
        formatter: function () {
          return  this.point.id + ' . ' + this.point.custom.view.view_name + '<br> ' + this.point.custom.view.view_description;
        },
      },
      marker: {
        radius: 25
      },
      color: 'rgb(124, 181, 236)',
      data: []
    }
  ]
}

这两个都是函数,可以自定义拼接你需要的值,我试了一下<br>可以起到换行的效果但是似乎加什么<h2>之类的就不生效了.

不知道这里面this里面到底什么结构? 没关系,用chrome debug一下就知道了,比去官网看直观多了

自定义数据

要是因为from to作为id不够进行展示的话,还可以用一下结构

data:[
	{from:1,to:2}
],
nodes:[
	{id:1,name:'xxxx',custom:'xxxxxxx'}
]

他会把from1 这个节点自动匹配nodes的id为1的节点,custom是我自定义的字段,里面放这个node更加详细的detail

click事件

我的click事件是写在component里面的(我是用的是angular10,以及angular-highcharts)

    this.chartStr['plotOptions']['networkgraph']['events'] = {
      click: (event: any) => {
        this.nodeDetail = event['point']['custom']['detail'];
        this.dialogTitle = event['point']['name'];
        this.dialogDisplay = true;
      }
    }

这时候我就可以拿到关于当前node的详细信息用于放进dialog进行展示了,这个this.chartStr就是一开始展示的json

展示

涉及到数据敏感,就只展示一小部分无关紧要的数据