Highcharts多系列结合linkedTo悬停问题。

我使用linkedTo选项将多个额外的图形(让我们称它们为 “孩子”)链接到一个主图形上,以获得一组图形。

我的问题是关于悬停高亮。当我悬停主图时,所有的子图和主图本身都被高亮显示。但是当我悬停任何一个子图时,只有这个子图和主图被高亮显示,其他子图变得模糊不清,这不是我想要的。

Highcharts.chart('container', {
  series: [{
    id: 'main',
    color: 'black',
    name: 'Main',
    type: 'line',
    data: [[1, 3], [1.5, 2.5], [2, 2], [2.5, 1.5], [3, 1]]
  }, {
    linkedTo: 'main',
    color: 'black',
    name: 'Child 1',
    type: 'line',
    data: [[2, 3], [3, 2], [4, 1]]
  }, {
    linkedTo: 'main',
    color: 'black',
    name: 'Child 2',
    type: 'line',
    data: [[3, 3], [4, 2], [5, 1]]
  }, {
    linkedTo: 'main',
    color: 'black',
    name: 'Child 3',
    type: 'line',
    data: [[4, 3], [5, 2], [6, 1]]
  }]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container"/>

有什么办法可以解决这种情况吗?

解决方案:

这个问题在这里报告。https:/github.comhighchartshighchartsissues11810 并标记为增强版。目前,作为一种变通方法,你可以在下面的表格中链接兄弟系列。afterLinkSeries 事件。

(function(H) {
  H.addEvent(H.Chart, 'afterLinkSeries', function(e) {
    this.series.forEach(function(s) {
      if (s.linkedParent) {
        s.linkedParent.linkedSeries.forEach(function(linkedS) {
          if (linkedS !== s) {
            s.linkedSeries.push(linkedS);
          }
        });
      }
    });
  });
}(Highcharts));

现场演示。 http:/jsfiddle.netBlackLabel6m4e8x0y4972。

文件。 https:/www.highcharts.comdocsextending-highchartsextending-highcharts


EDIT

由于图例项目点击的问题,比较好的解决方法是覆盖掉 Pointer.prototype.applyInactiveState 方法。

Highcharts.Pointer.prototype.applyInactiveState = function(points) {
  var activeSeries = [],
    series;
  // Get all active series from the hovered points
  (points || []).forEach(function(item) {
    series = item.series;
    // Include itself
    activeSeries.push(series);
    // Include parent series
    if (series.linkedParent) {
      activeSeries.push(series.linkedParent);
      // CHANGE
      series.linkedParent.linkedSeries.forEach(function(linkedS) {
        activeSeries.push(linkedS);
      });
      // END CHANGE
    }
    // Include all child series
    if (series.linkedSeries) {
      activeSeries = activeSeries.concat(series.linkedSeries);
    }
    // Include navigator series
    if (series.navigatorSeries) {
      activeSeries.push(series.navigatorSeries);
    }
  });
  // Now loop over all series, filtering out active series
  this.chart.series.forEach(function(inactiveSeries) {
    if (activeSeries.indexOf(inactiveSeries) === -1) {
      // Inactive series
      inactiveSeries.setState('inactive', true);
    } else if (inactiveSeries.options.inactiveOtherPoints) {
      // Active series, but other points should be inactivated
      inactiveSeries.setAllPointsToState('inactive');
    }
  });
};

现场演示。 http:/jsfiddle.netBlackLabel6m4e8x0y4974。

给TA打赏
共{{data.count}}人
人已打赏
解决方案

在Kubernetes中为react和react-native应用提供Express API。

2022-5-12 0:00:16

解决方案

SQL炼金术--混合属性--拆分一列。

2022-5-12 0:00:18

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索