当用户选择一列时尝试淡出所有其他列

Question

当用户选择特定列时，我无法弄清楚如何淡出所有其他列。我尝试制作一个循环来遍历数据，但它仍然不起作用。

另外，我需要一旦用户单击一列然后再次单击它，所有列都会再次淡入。

此代码目前仅突出显示一个条形。

有什么建议吗？

$(function() {

    $('#container4').highcharts({
        chart: {
            type: 'column'
        },

        title: {
            text: ''
        },

        legend: {
            enabled: false
        },

        exporting: {
            enabled: false
        },

        credits: {
            enabled: false
        },

        xAxis: {
            gridLineColor: '',
            labels: {
                enabled: false
            }
        },

        yAxis: {
            title: {
                text: 'Fruit'
            },
            visible: false
        },

        credits: {
            enabled: false
        },

        plotOptions: {
            series: {
                allowPointSelect: true,
                states: {
                    select: {
                        color: 'blue',
                    }
                }
            },
            column: {
                stacking: 'normal',
            }
        },

        series: [{
            name: '',
            data: [-40, -60, -70, -80, -90, -100, -100, -100, -100, -100, -100],
            threshold: 0,
            color: '#E0E0E0 ',
            enableMouseTracking: false,
        }, {
            name: '',
            data: [-60, -40, -30, -20, -10, 0, 10, 20, 30, 40, 50],
            threshold: 0,
            color: 'green',
            negativeColor: 'red',
        }, ]
    });
});

Answer 1

API你没用过，你可以自己做（如果不和其他东西冲突的话）。

$(function() {
    $('#container4').highcharts({
        chart: {
            type: 'column',
            events: {
                click: function(e) {
                    console.log(e);
                },
                selection: function(e) {
                    console.log(e);
                }
            }
        },
        title: {
            text: ''
        },
        legend: {
            enabled: false
        },
        exporting: {
            enabled: false
        },
        credits: {
            enabled: false
        },
        xAxis: {
            gridLineColor: '',
            labels: {
                enabled: false
            }
        },
        yAxis: {
            title: {
                text: 'Fruit'
            },
            visible: false
        },
        credits: {
            enabled: false
        },
        plotOptions: {
            /*series: {
                allowPointSelect: true,
                states: {
                    select: {
                        color: 'blue',
                    }
                }
            },*/
            column: {
                stacking: 'normal',
            }
        },
        series: [{
            name: '',
            data: [-40, -60, -70, -80, -90, -100, -100, -100, -100, -100, -100],
            threshold: 0,
            color: '#E0E0E0 ',
            enableMouseTracking: false,
        }, {
            name: '',
            data: [-60, -40, -30, -20, -10, 0, 10, 20, 30, 40, 50],
            threshold: 0,
            color: 'green',
            negativeColor: 'red',
        }, ]
    });
});

$(document).on('click', '.highcharts-tracker rect', function() {
    var elm = $(this);
    if (!elm.attr('class')) {
        $('.highcharts-tracker rect').removeAttr('class').css('opacity', 0.5);

        elm.attr('class', 'active').css('opacity', 1);
    } else {
        $('.highcharts-tracker rect').removeAttr('class').css('opacity', 1);
    }
});

.highcharts-series rect {
  transition:all .3s ease;
}

<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container4"></div>

http://jsbin.com/jiluwimiyo