javascript - Highcharts - 分类 y 轴的标签放置

Question

我有一张图表比较了两个人多年来的 bool 数据。

下面的 jsfiddle 代表我所需要的，除了我需要底部轴上的标签与红色和绿色 block 的中心对齐并且不让 5 出现在最右边的刻度上。

http://jsfiddle.net/zzella/Xa46f/3/

有人知道如何为上面的图表实现这一点，或者有更好的方法来构建数据以获得我需要的结果吗？

$(function () {
$('#container').highcharts({
    credits: {
        enabled: false
    },
    exporting: {
        enabled: false
    },
    chart: {
        type: 'bar'
    },
    title: {
        text: 'Action completed for year (Yes/No)'
    },
    xAxis: {
        categories: ['Person 1', 'Person 2'],
        labels: {
            align: 'left',
            style: {
                fontSize: '13px',
                fontFamily: 'Arial'
            },
            y: -45,
            x: 60
        },
        lineColor: '#FFFFFF',
        tickColor: '#FFFFFF',

    },
    yAxis: {
        type: 'category',
        categories: ["2010","2011","2012","2013", "2014"],
        title: false,
        lineColor: '#FFFFFF',
        tickColor: '#FFFFFF',
        gridLineColor: '#FFFFFF',
    },
    legend: false,
    plotOptions: {
        bar: {
            stacking: 'normal',
            dataLabels: {
                enabled: true,
                color: '#FFFFFF',
                align: 'center',
                style: {
                    fontSize: '13px',
                    fontFamily: 'Verdana, sans-serif',
                    textShadow: '0 0 3px black'
                },
                formatter: function () {
                    console.log(this);
                    return this.key
                }
            },
        },
    },
    series: [{
        name: '2014',
        data: [{
            name: "2014: no",
            color: "#a50000",
            y: 1
        }, {
            name: "2014: yes",
            color: "#006500",
            y: 1
        }],

    }, {
        name: '2013',
        data: [{
            name: "2013: yes",
            color: "#006500",
            y: 1
        }, {
            name: "2013: yes",
            color: "#006500",
            y: 1
        }]
    }, {
        name: '2012',
        data: [{
            name: "2012: yes",
            color: "#006500",
            y: 1
        }, {
            name: "2012: no",
            color: "#a50000",
            y: 1
        }]
    }, {
        name: '2011',
        data: [{
            name: "2011: no",
            color: "#a50000",
            y: 1
        }, {
            name: "2011: yes",
            color: "#006500",
            y: 1
        }]
    }, {
        name: '2010',
        data: [{
            name: "2010: no",
            color: "#a50000",
            y: 1
        }, {
            name: "2010: no",
            color: "#a50000",
            y: 1
        }]
    }]
});
});

Answer 1

实现这一点的一个方法是向您的 yAxis 添加标签格式，就像您对 xAxis 所做的那样。如果您添加 labels: { x: 40 }，标签将沿着框居中。

要摆脱随机的 5，您可以执行 showLastLabel: false。

这是执行您描述的操作的最终 yAxis:

yAxis: {
    type: 'category',
    categories: ["2010","2011","2012","2013", "2014"],
    title: false,
    lineColor: '#FFFFFF',
    tickColor: '#FFFFFF',
    gridLineColor: '#FFFFFF',
    labels: {
        x: 40
    },
    showLastLabel: false
},

Link to the Fiddle .