highchart network network-graph

允我心安 提交于 2021-02-11 14:07:18

问题


I am using highchart to create network-graph. i need to change tooltip value. but its not working.

please check my code

var json = [{
    "key": "1",
    "value": "19122",
    "code": "A"
  }, {
    "key": "19122",
    "value": "623753",
     "code": "B"
  }, {
    "key": "19122",
    "value": "582024",
     "code": "C"
  }],
  data = [];

json.forEach(function(point) {
 data.push([point.key, point.value])
});

Highcharts.chart('container', {

  tooltip: {
    formatter: function() {
     return data.code;
    }
  },

  series: [{
    type: 'networkgraph',
    layoutAlgorithm: {
      enableSimulation: true
    },
     dataLabels: {
            enabled: true,
            linkFormat: ''
        },
    data
  }]

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/networkgraph.js"></script>
<div id="container"></div>

when i mouse over the network grape node, i need to show code value. how i do it.


回答1:


Try this:

var json = [{
    "key": "1",
    "value": "19122",
    "code": "A"
  }, {
    "key": "19122",
    "value": "623753",
     "code": "B"
  }, {
    "key": "19122",
    "value": "582024",
     "code": "C"
  }],
  data = [];

json.forEach(function(point) {
 data.push([point.key, point.value])
});

Highcharts.chart('container', {

  tooltip: {
    formatter: function() {
      const codes = json.reduce((acc, cur)=>{
        if(cur.key===this.key||cur.value===this.key) acc.push(cur.code);
        return acc;}, []);
      return codes.join(',');         
    }
  },

  series: [{
    type: 'networkgraph',
    layoutAlgorithm: {
      enableSimulation: true
    },
     dataLabels: {
            enabled: true,
            linkFormat: ''
        },
    data
  }]

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/networkgraph.js"></script>
<div id="container"></div>


来源:https://stackoverflow.com/questions/59046325/highchart-network-network-graph

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!