javascript - Highcharts 轴中特定部分的样式

Question

我正在尝试使用 highchart 库创建一个堆叠条形图，以实现与此查询所附的交互类似的交互。

有没有一种方法可以像上面描述的那样编辑轴样式以在特定时期内使用阴影线？我还希望添加其他标签(例如突出显示的年份和版本)。有人可以指导我了解可以为此调整的属性吗？

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添加路径。