时间戳

首页 > 解决方案 > 在网络图中悬停时覆盖默认突出显示

highcharts - 在网络图中悬停时覆盖默认突出显示

问题描述

我通过固定每个节点的初始位置来使用网络图绘制二叉树。

如果我将鼠标悬停在一个节点上，它会突出显示默认连接到该节点的每个节点。

如何覆盖它以仅突出显示先行节点（即从右到左通过从悬停节点返回到最左侧单个节点的路径）。

我尝试在连接到悬停节点的链接末端拾取前两个节点，并不断迭代，直到没有更多的先行节点，但它没有解决。

    function iterateBack(node) {
      console.log("Node " + node.id);
      var previousNodes = node.linksTo
      if (previousNodes != null) {
        previousNodes.forEach(function(l) {
          var precedingNode = l.fromNode;
          precedingNode.update({
            //color: 'black',
            active: true
          });
          iterateBack(precedingNode);
        });
      }
    }



    Highcharts.chart('container', {
      tooltip: {
        enabled: false
      },
      credits: {
        enabled: false
      },
      chart: {
        type: 'networkgraph',
        margin: 20,
        height: '100%',
      },
      plotOptions: {
        series: {
          cursor: 'crosshair',
          stickyTracking: false,
          point: {
            events: {
              mouseOver: function() {
                //this.active = true;
                iterateBack(this);
                this.linksFrom.forEach(function(l) {
                  l.update({
                    active: false
                  });
                });
              },
              mouseOut: function() {
                this.linksTo.forEach(function(l) {
                  l.update({
                    active: false
                  });
                });
                this.linksFrom.forEach(function(l) {
                  l.update({
                    active: false
                  });
                });
              }
            }
          },
        }
      },
      series: [{
        marker: {
          radius: 15,
          lineWidth: 2,
          lineColor: 'black',
        },
        layoutAlgorithm: {
          maxIterations: 1,
          initialPositions: function() {
            var chart = this.series[0].chart,
              width = chart.plotWidth,
              height = chart.plotHeight;

            this.nodes.forEach(function(node, i) {
              var initialX = 0;
              var initialY = 500;
              var distance = 80;
              var identifiers = node.id.split(",");
              var round = identifiers[0] - 1;
              var level = identifiers[1] - 1;
              node.plotX = initialX + (round * distance * 2);
              node.plotY = initialY - (round * distance) + (level * 2 * distance);
            });
          }
        },
        keys: ['from', 'to'],
        data: [
          ['1,1', '2,1', 'win'],
          ['1,1', '2,2', 'win'],

          ['2,1', '3,1', 'win'],
          ['2,1', '3,2', 'lose'],
          ['2,2', '3,2', 'win'],
          ['2,2', '3,3', 'lose'],

          ['3,1', '4,1', 'win'],
          ['3,1', '4,2', 'lose'],
          ['3,2', '4,2', 'win'],
          ['3,2', '4,3', 'lose'],
          ['3,3', '4,3', 'win'],
          ['3,3', '4,4', 'lose'],

          ['4,1', '5,1', 'win'],
          ['4,1', '5,2', 'lose'],
          ['4,2', '5,2', 'win'],
          ['4,2', '5,3', 'lose'],
          ['4,3', '5,3', 'win'],
          ['4,3', '5,4', 'lose'],
          ['4,4', '5,4', 'win'],
          ['4,4', '5,5', 'lose'],

          ['5,1', '6,1', 'win'],
          ['5,1', '6,2', 'lose'],
          ['5,2', '6,2', 'win'],
          ['5,2', '6,3', 'lose'],
          ['5,3', '6,3', 'win'],
          ['5,3', '6,4', 'lose'],
          ['5,4', '6,4', 'win'],
          ['5,4', '6,5', 'lose'],
          ['5,5', '6,5', 'win'],
          ['5,5', '6,6', 'lose']
        ],
        nodes: [{
            id: '1,1'
          },
          {
            id: '2,1'
          },
          {
            id: '2,2'
          },
          {
            id: '3,1'
          },
          {
            id: '3,2'
          },
          {
            id: '3,3'
          },
          {
            id: '4,1'
          },
          {
            id: '4,2'
          },
          {
            id: '4,3'
          },
          {
            id: '4,4'
          },
          {
            id: '5,1'
          },
          {
            id: '5,2'
          },
          {
            id: '5,3'
          },
          {
            id: '5,4'
          },
          {
            id: '5,5'
          },
          {
            id: '6,1'
          },
          {
            id: '6,2'
          },
          {
            id: '6,3'
          },
          {
            id: '6,4'
          },
          {
            id: '6,5'
          },
          {
            id: '6,6'
          }
        ],
      }]
    })

标签： highcharts

解决方案

setState从网络图点类原型覆盖默认方法，并iterateBack在鼠标悬停事件中使用您的函数。

(function(H) {
    H.seriesTypes.networkgraph.prototype.pointClass.prototype.setState = function() {
        H.Point.prototype.setState.apply(this, arguments);
    }
}(Highcharts));

现场演示： https ://jsfiddle.net/BlackLabel/ua72mrqp/

文档： https ://www.highcharts.com/docs/extending-highcharts/extending-highcharts

推荐阅读