【问题标题】:highchart network network-graphhighchart网络网络图
【发布时间】:2019-11-26 16:44:37
【问题描述】:

我正在使用 highchart 创建网络图。我需要更改工具提示值。但它不起作用。

请检查我的代码

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>

当我将鼠标悬停在网络葡萄节点上时,我需要显示代码值。我是怎么做到的。

【问题讨论】:

    标签: javascript jquery highcharts


    【解决方案1】:

    试试这个:

    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>

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2011-09-15
      • 2015-06-16
      • 1970-01-01
      • 2021-12-26
      • 1970-01-01
      相关资源
      最近更新 更多