在条形图开头的高位条形图上添加边框

时间:2014-11-04 23:44:37

标签: highcharts

我在条形图中创建了一个条形图,条形图围绕着所有条形图。但是,我已禁用网格线和刻度线。我希望将整个酒吧封闭在包括酒吧最左边的边框中。是否可以在栏的那一部分添加边框?你可以在这里看到我的图表:

http://jsfiddle.net/9csjzsx5/

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'bar',
            width: 265,
            height: 350
        },
        credits: {
            text: ''
        },
        title: {
            text: ''
        },
        xAxis: {
            labels: {
                align: 'left',
                x: 0,
                y: -12
            },
            tickWidth: 0,
            lineWidth: 0,
            minorGridLineWidth: 0,            
            categories: ['Label 1', 'Label 2', 'Label 3', 'Label 4', 'Label 5', 'Label 6', 'Label 7', 'Label 8', 'Label 9']
        },
        yAxis: {

            minorGridLineWidth: 0,
            majorGridLineWidth: 0,

            gridLineWidth: 0,
            labels: {
                enabled: false
            },
            title: {
                text: '',
                align: 'high'
            },
            tickWidth: 0
        },
        plotOptions: {
            bar: {
                colorByPoint: true,
                colors: ['#4572A7', '#AA4643', '#89A54E', '#80699B', '#3D96AE', '#DB843D', '#92A8CD', '#A47D7C', '#B5CA92']
            },
            series: {
                stacking: 'normal',
                borderColor: '#303030'
            }
        },
        series: [{
            data: [{
                dataLabels: {
                    enabled: true,
                    defer: false,
                    align: 'right',
                    color: 'black',
                    x: 0,
                    format: '{y}%',
                    style: {
                        fontSize: '12px',
                        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black',
                    }
                },
                y: 9,
                color: 'white'
            }, {
                dataLabels: {
                    enabled: true,
                    defer: false,
                    align: 'right',
                    color: 'black',
                    x: 0,
                    format: '{y}%',
                    style: {
                        fontSize: '12px',
                        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black',
                    }
                },
                y: 9,
                color: 'white'
            }, {
                dataLabels: {
                    enabled: true,
                    defer: false,
                    align: 'right',
                    color: 'black',
                    x: 0,
                    format: '{y}%',
                    style: {
                        fontSize: '12px',
                        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black',
                    }
                },
                y: 8,
                color: 'white'
            }, {
                dataLabels: {
                    enabled: true,
                    defer: false,
                    align: 'right',
                    color: 'black',
                    x: 0,
                    format: '{y}%',
                    style: {
                        fontSize: '12px',
                        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black',
                    }
                },
                y: 9,
                color: 'white'
            }, {
                dataLabels: {
                    enabled: true,
                    defer: false,
                    align: 'right',
                    color: 'black',
                    x: 0,
                    format: '{point.name}%',
                    style: {
                        fontSize: '12px',
                        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black',
                    }
                },
                y: 10,
                name: '<0.001',
                color: 'white'
            }, {
                dataLabels: {
                    enabled: true,
                    defer: false,
                    align: 'right',
                    color: 'black',
                    x: 0,
                    format: '{point.name}%',
                    style: {
                        fontSize: '12px',
                        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black',
                    }
                },
                y: 10,
                name: '<0.001',
                color: 'white'
            }, {
                dataLabels: {
                    enabled: true,
                    defer: false,
                    align: 'right',
                    color: 'black',
                    x: 0,
                    format: '{point.name}%',
                    style: {
                        fontSize: '12px',
                        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black',
                    }
                },
                y: 10,
                name: '<0.001',
                color: 'white'
            }, {
                dataLabels: {
                    enabled: true,
                    defer: false,
                    align: 'right',
                    color: 'black',
                    x: 0,
                    format: '{point.name}%',
                    style: {
                        fontSize: '12px',
                        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black',
                    }
                },
                y: 10,
                name: '<0.001',
                color: 'white'
            }, {
                dataLabels: {
                    enabled: true,
                    defer: false,
                    align: 'right',
                    color: 'black',
                    x: 0,
                    format: '{point.name}%',
                    style: {
                        fontSize: '12px',
                        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black',
                    }
                },
                y: 10,
                name: '<0.001',
                color: 'white'
            }],
            showInLegend: false,
            pointWidth: 15,
        }, {
            data: [2, 2, 3, 2, 1, 1, 1, 1, 1],
            showInLegend: false,
            pointWidth: 15,
        }]
    });
});

缺失的边框在底部颜色上尤为明显,但在打印时,它们在所有颜色上都可见。

1 个答案:

答案 0 :(得分:3)

边界实际上在那里,但似乎隐藏在轴min之外。

如果将min设置为略小于零,并将startOnTick设置为false,则会出现边框:

yAxis: {
 min:-.1,
 startOnTick:false,
}