首页 文章

如何一次只显示一对链接的Highcharts系列

提问于
浏览 次
1

我有一个Highcharts柱形图，其中有多个“对”，设置在一个数组中 - 其中一个是实际数字，另一个是行业平均值 .

var links = {
    'Apples': 'Apples average',
    'Pears': 'Pears average',
    'Oranges': 'Oranges average',
    'Bananas': 'Bananas average'
};

.......

series: [{
        id: 'Apples',
        name: 'Apples',
        color: 'rgba(0,167,184,1)',
        data: [3.8, 8.9, 8.4],
        pointPadding: 0.3,
        pointPlacement: 0.2

    }, {
        id: 'Apples average',
        name: 'Apples average',
        color: 'rgba(135,28,90,1)',
        data: [2.7, 8.1, 7.9],
        pointPadding: 0.3,
        pointPlacement: -0.2

    },

我正在尝试显示 only one pair at a time ，所以当加载图表时，第一对是可见的，当点击下一个图例项目（对）时，第一对被隐藏，只显示新对，等等 .

plotOptions: {
        column: {
            pointPadding: 0.2,
            borderWidth: 0,
            events: {
                legendItemClick: function (event) {
                    var sisterSeries = this.chart.get(links[this.name]);
                    if (this.visible) {
                        sisterSeries.hide();
                    } else {
                        sisterSeries.show();
                    }
                }
            }
        }
    },

我无法实现开/关切换效果，我需要一次只显示一对 - 我仍然需要手动点击现有的对来隐藏它们 . 任何帮助，将不胜感激 .

有关如何切换系列（http://jsfiddle.net/tK38J/65/）的问题非常相似，但我找不到要切换的数据在一对中的问题 .

（在我的示例的图例中，我会隐藏'... average'菜单项，因此它们不需要实际作为链接工作） .

示例：http://jsfiddle.net/6cL56x9r/4/

highcharts toggle

1 回答

  • 2

    链接配对系列，如评论中所述 . 如果只有一个主系列可见，那么你可以在legendItemClick事件中循环，如下所示：

    legendItemClick: function (event) {
                    this.chart.series.forEach(function (serie) {
                        if (serie.linkedSeries.length && this != serie) {
                        serie.setVisible(false, false);
                      }
                    }, this);
                }

    示例：http://jsfiddle.net/6cL56x9r/11/

    如果将属性showInLegend设置为true，则可以保持链接系列可见，但是您需要稍微修改循环中的条件 .

    回复于

相关问题