Hide/Show yaxis 系列 hide/show 事件

Question

我正在制作一个多面板图表，我试图在轴系列的隐藏事件中隐藏 y 轴。

我尝试设置轴高度并重新绘制它（没有用），设置极值，但没有任何效果。我也试过这个 solution 但没有用，我相信它没有用，因为我使用的是 highstock 而 "solution" 使用的是 Highcharts，这有意义吗？

当一个隐藏时，我还必须调整其他 y 轴的大小，但这是另一个问题。但是，如果有人知道如何自动执行此操作，将不胜感激

这是我的 JSFiddle code。

$(function () {
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-ohlcv.json&callback=?', function (data) {        
    var data1 = [ [100,0], [200,0], [300,1], [400,0], [500,1] ];
    var data2 = [ [100,1], [200,0], [300,1], [400,0], [500,0] ];      
    var data3 = [ [100,1], [200,1], [300,0], [400,0], [500,1] ];    
    var data4 = [ [100,0], [200,1], [300,1], [400,0], [500,0] ];

    // create the chart
    var chart = $('#container').highcharts('StockChart', {

        title: {
            text: 'AAPL Historical'
        },
        legend: {
            enabled: true
        },            

        plotOptions: {
            series: {
                events: {
                    hide: function (event) {
                        console.log(this.yAxis)
                        //Hide
                    },
                    show: function (event) {
                        console.log(this.yAxis)
                        //Display
                    }
                }
            }
        },

        tooltip: {
            pointFormatter: function() {
                var state = (this.y == 1 ? "Active" : "Inactive");
                var tooltip = '<span style="color:' + this.color + '">\u25CF</span> ' + this.series.name + ': <b>' + state + '</b><br/>'

                return tooltip;
            }
        },

        yAxis: [{
            height: '25%',
            offset: 0,
            lineWidth: 2,
            labels: {enabled: false}
        }, {
            top: '25%',
            height: '25%',
            offset: 0,
            lineWidth: 2,
            labels: {enabled: false},
            title : {
                text: "aaa"
            }
        }, {
            top: '50%',
            height: '25%',
            offset: 0,
            lineWidth: 2,
            labels: {enabled: false}
        }, {
            top: '75%',
            height: '25%',
            offset: 0,
            lineWidth: 2,
            labels: {enabled: false}
        }],

        series: [{
            name: 'Data1',
            data: data1,
            step: true,
            yAxis: 0
        }, {
            name: 'Data2',
            data: data2,
            step: true,
            yAxis: 1
        }, {
            name: 'Data3',
            data: data3,
            step: true,
            yAxis: 2
        }, {
            name: 'Data4',
            data: data4,
            step: true,
            yAxis: 3
        }]
    });
});

});

Answer 1

我在 solution 上做了更多工作，我找到了一种隐藏 y 轴的方法，方法是在系列隐藏事件中将其高度更改为 0%。我还在系列节目活动中将轴高度增加回 25%。

plotOptions: {
    series: {
        events: {
            hide: function (event) {
                this.yAxis.update({
                    height: '0%'
                });
            },
            show: function (event) {
                this.yAxis.update({
                    height: '25%'
                });
            }
        }
    }
},

完整 code

编辑：

我找到了一种方法，可以在隐藏其中一个轴或显示一个轴时调整其他 y 轴的大小。您可以查看完整的 code.

$(function () {
    $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-ohlcv.json&callback=?', function (data) {        
        var data1 = [ [100,0], [150,1], [150,0], [200,0], [300,1], [400,0], [500,1] ];
        var data2 = [ [100,1], [200,0], [300,1], [400,0], [500,0] ];      
        var data3 = [ [100,1], [200,1], [300,0], [400,0], [500,1] ];    
        var data4 = [ [100,0], [200,1], [300,1], [400,0], [500,0] ];

        // create the chart
        var chart = $('#container').highcharts('StockChart', {

            title: {
                text: 'AAPL Historical'
            },
            legend: {
                enabled: true
            },            

            plotOptions: {
                series: {
                    marker: {
                        enabled: true,
                        radius : 2
                    },
                    events: {
                        hide: function (event) {
                            var serieYAxis = this.yAxis;
                            serieYAxis.visivel = false;
                            serieYAxis.update({
                                height: '0%',
                                title: {
                                    style: {"display":"none"}
                                }
                            });

                            var axis = this.chart.yAxis.filter(
                                function (axis) {
                                    return axis.visivel == null || axis.visivel;
                                }
                            );
                            resizeAxis(axis);

                        },
                        show: function (event) {
                            this.yAxis.visivel = true;
                            this.yAxis.update({
                                title: {
                                    style: {"display":"initial"}
                                }
                            });

                            var axis = this.chart.yAxis.filter(
                                function (axis) {
                                    return axis.visivel == null || axis.visivel;
                                }
                            );


                            resizeAxis(axis);
                        }
                    }
                }
            },

            tooltip: {
                pointFormatter: function() {
                    var state = (this.y == 1 ? "Active" : "Inactive");
                    var tooltip = '<span style="color:' + this.color + '">\u25CF</span> ' + this.series.name + ': <b>' + state + '</b><br/>'

                    return tooltip;
                }
            },

            yAxis: [{
                height: '25%',
                offset: 0,
                lineWidth: 2,
                labels: {enabled: false},
                title : {
                    text: "y0"
                }
            }, {
                top: '25%',
                height: '25%',
                offset: 0,
                lineWidth: 2,
                labels: {enabled: false},
                title : {
                    text: "y1"
                }
            }, {
                top: '50%',
                height: '25%',
                offset: 0,
                lineWidth: 2,
                labels: {enabled: false},
                title : {
                    text: "y2"
                }
            }, {
                top: '75%',
                height: '25%',
                offset: 0,
                lineWidth: 2,
                labels: {enabled: false},
                title : {
                    text: "y3"
                }
            }],

            series: [{
                name: 'Data1',
                data: data1,
                step: true,
                yAxis: 0
            }, {
                name: 'Data2',
                data: data2,
                step: true,
                yAxis: 1
            }, {
                name: 'Data3',
                data: data3,
                step: true,
                yAxis: 2
            }, {
                name: 'Data4',
                data: data4,
                step: true,
                yAxis: 3
            }]
        });
    });


});

Hide/Show yaxis 系列 hide/show 事件

Hide/Show yaxis on series hide/show event

javascript

highcharts

highstock