如何将XY缩放与高图表一起使用时隐藏未选择的系列和轴

How can I hide non-selected series and axes when using XY zoom with highcharts?

本文关键字：隐藏 选择 系列 XY 缩放 一起 高图表      更新时间：2023-09-26

我们使用highcharts（特别是highstock）来绘制多种类型的数据。我们想利用XY缩放类型，但是，如果我们只能放大到使用选择框选择的内容，那就太棒了。

但是，当使用 XY 放大时，如果在另一个轴上不选择任何数据，则轴根本不显示任何内容。如果突出显示/选定的区域在整个图形上重新绘制，那将是理想的选择。

我尝试在浏览器控制台窗口中查看图表对象，缩放后的所有轴都像"series[x].visible"这样的值是相同的。甚至有可能完成我所要求的吗？

编辑：我应该注意，我们需要让图表不要仅仅因为我们将显示的数据量而相互叠加，这就是两个图表独立显示的原因。

小提琴：http://jsfiddle.net/cwc4em4w/

$('#container').highcharts({
    chart: {
        type: 'line',
        rightMargin: 80,
        zoomType: 'xy'
    },        
    yAxis: [{
        id: 'hi',
        height: '40%',
        top: '10%',
        title: { text: 'label 1', y: 0, x: -30, align: 'middle' },
        labels: { align: 'left', x: -25 }
    }, {
        id: 'ho',
        height: '40%',
        top: '60%',
        title: { text: 'label 2', y: 0, x: 0, align: 'middle' },
        labels: { align: 'left', x: 0 }
    }],
    xAxis: [{
        type: 'datetime',
        tickInterval: 24 * 3600 * 1000,
        yAxis: 'hi'
    },{
        type: 'datetime',
        tickInterval: 24 * 3600 * 1000,
        yAxis: 'ho'
    }],
    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4],
        pointStart: Date.UTC(2010, 0, 1),
        pointInterval: 24 * 3600 * 1000,
        yAxis: 'hi'
    },{
        data: [129.9, 171.5, 1106.4, 1129.2, 1144.0, 1176.0, 1135.6, 1148.5, 1216.4],
        pointStart: Date.UTC(2010, 0, 1),
        pointInterval: 24 * 3600 * 1000,
        yAxis: 'ho'
    }]
});

是的，这是可能的，但只需手动处理：请参阅此小提琴。

若要实现所描述的行为，可以更新以下图例项单击处理程序上的yAxis属性：

plotOptions: {
    series: {
        events: {
            legendItemClick: function (e) {
                var thisIndex = this.index;
                var otherIndex = (this.index == 0) ? 1 : 0;
                var isOtherEnabled = false;
                if (this.chart.yAxis[otherIndex].options.labels.enabled) {
                    isOtherEnabled = true;
                }
                var isThisEnabled = false;
                if (this.chart.yAxis[thisIndex].options.labels.enabled) {
                    isThisEnabled = true;
                }
                if (isThisEnabled) {
                    this.chart.yAxis[thisIndex].update({
                        labels: {
                            enabled: false
                        },
                        title: {
                            text: null
                        }
                    });
                    if (isOtherEnabled) {
                        this.chart.yAxis[otherIndex].update({
                            height: '80%',
                            top: '10%'
                        });
                    }
                } else {
                    this.chart.yAxis[thisIndex].update({
                        labels: {
                            enabled: true
                        },
                        title: {
                            text: (thisIndex == 0) ? 'label 1' : 'label 2'
                        },
                        height: (isOtherEnabled) ? '40%' : '80%',
                        top: (isOtherEnabled) ? ((thisIndex == 0) ? '10%' : '60%') : '10%'
                    });
                    if (isOtherEnabled) {
                        this.chart.yAxis[otherIndex].update({
                            height: '40%',
                            top: (otherIndex == 0) ? '10%' : '60%'
                        }); 
                    }
                }
                this.chart.reflow();
            }
        }
    }
},

此外，我看到您正在尝试通过更改其x和y来对齐yAxis标签的位置。但它使定位相对于另一个轴：因此，首先，在应用上述代码片段时，隐藏第二个系列时不会看到label 1标题，因为它将放置在 highcharts 容器之外。要解决此问题，只需确保正确定位yAxis.offset及其title相对offset：

yAxis: [{
    id: 'hi',
    height: '40%',
    top: '10%',
    offset: 30,
    title: { text: 'label 1', offset: 30, align: 'middle' },
    labels: { align: 'left' }
}, {
    id: 'ho',
    height: '40%',
    top: '60%',
    offset: 30,
    title: { text: 'label 2', offset: 30, align: 'middle' },
    labels: { align: 'left' }
}],
相关文章：