高图轴中特定段的样式

Question

我正在尝试使用高图库创建堆叠条，以使交互类似于此查询附带的交互。

有没有办法像上面描述的那样编辑轴样式，以便在特定时间内绘制阴影线？此外，我希望添加其他标签（如年份和版本突出显示）。有人可以指示我可以调整的属性吗？

http://jsfiddle.net/pwr84fft/

        $(function () {
    $('#container').highcharts({
        chart : {
            type : 'bar',
            events : {

                click : function () {

                    var i,
                    j = 0;
                    var chart = $('#container').highcharts();
                    for (i = 0; i < chart.series.length; i++) {
                        chart.series[i].data[i].select(false, false);
                    }
                }

            }
        },
        title : {
            text : ''
        },
        xAxis : {
            categories : ['United States', 'Canada', 'Germany', 'Italy', 'Spain'],
            minorGridLineWidth : 0
        },
        yAxis : {
            min : 0,
            title : {
                text : ''
            },
            labels : {
                enabled : false
            },

            gridLineColor : 'transparent',
            stackLabels : {
                style : {
                    color : 'black'
                },
                enabled : true
            }
        },
        legend : {
            enabled : true
        },
        plotOptions : {
            series : {
                stacking : 'normal',
                allowPointSelect : true,
                states : {
                    select : {
                        color : null,
                        borderWidth : 500,
                        borderColor : 'blue',
                        accumulate : true
                    },

                },

                dataLabels : {
                    enabled : true
                },
                events : {
                    legendItemClick : function () {
                        // alert('I am an alert');
                        var chart = $('#container').highcharts();
                        for (var i = 0; i < chart.series.length; i++) {
                            if (this.name === chart.series[i].name) {
                                for (var j = 0; j < chart.series[i].data.length; j++) {
                                    chart.series[i].data[j].select(true, true);
                                }
                            }
                        }

                /*      for (var i = 0; i < chart.series.length; i++) {
                            if (this.name !== chart.series[i].name) {
                                for (var j = 0; j < chart.series[i].data.length; j++) {
                                    chart.series[i].data[j].update({opacity: 0.1 })
                                }
                            }

                        }*/

                    }

                }
            }

        },
        tooltip : {
            enabled : true
        },
        series : [{
                name : 'Consulting',
                data : [500, 323, 421, 744, 210]
            }, {
                name : 'Support',
                data : [223, 244, 213, 244, 122]
            }, {
                name : 'training',
                data : [232, 542, 365, 762, 341]
            }, {
                name : 'training2',
                data : [232, 542, 365, 762, 341]
            }, {
                name : 'other',
                data : [232, 542, 365, 762, 341]
            }, {
                name : 'Software2',
                data : [343, 423, 464, 727, 75]
            }
        ]

    });

});
Highcharts.theme = {
    colors: ['#E6E6E6', '#808080', '#B2B2B2', '#CCCCCC','#999999','#525252','#404040','#4D4D4D'],
    chart: {
        backgroundColor: {
            linearGradient: [0, 0, 0, 0],
            stops: [
                [0, 'rgb(255, 255, 255)'],
                [1, 'rgb(240, 240, 255)']
            ]
        },
    },
    title: {
        style: {
            color: '#000',
            font: 'bold 16px "Trebuchet MS", Verdana, sans-serif'
        }
    },
    subtitle: {
        style: {
            color: '#666666',
            font: 'bold 12px "Trebuchet MS", Verdana, sans-serif'
        }
    },

    legend: {
        itemStyle: {
            font: '9pt Trebuchet MS, Verdana, sans-serif',
            color: 'black'
        },
        itemHoverStyle:{
            color: 'gray'
        }   
    }
};

jsfiddle表示到目前为止所做的代码。

Answer 1

您可以将lineWidth设置为0来禁用轴线。然后使用Renderer添加路径。