Question

我有一张图表，比较了两年来两个人的布尔数据。

下面的jsfiddle表示我需要的东西，除了我需要底部轴上的标签与红色和绿色块的中心对齐，并且不要让最右边的刻度线显示5。

任何人都有任何想法如何实现上述图表，或者可能是一种更好的方法来构建数据，以获得我需要的结果？

$(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

Highcharts - 分类y轴的标签放置

1 个答案: