Question

我遇到Highcharts的问题。

我想显示每个yAxis标签，但默认情况下Highcharts会隐藏一半标签。

图形的高度是固定的，类别的数量是可变的，因此增加高度不是解决方案。

我有一个技巧可以做但我发现它很脏：

我可以在轴上添加：

tickPositions：[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21， 22,23,24,25]

但我试图找到更好的方法。

这是example和我的代码：

$(function () {
$('#container').highcharts({
    chart : {
        type : "bar",
        backgroundColor : null,
        borderColor : "#000000",
        borderWidth : 0,
        options3d : {
            enabled : false
        }
    },
    plotOptions : {
        bar : {}

    },
    credits : {
        enabled : false
    },
    colors : ["#5B9BD5", "#ED7D31", "#A5A5A5", "#FFC000", "#70AD47", "#4472C4"],
    title : {
        align : "center",
        useHTML : true,
        text : ""
    },
    subtitle : {
        align : "center",
        useHTML : true,
        text : ""
    },
    legend : {
        align : "center",
        borderColor : "#000000",
        borderWidth : 0,
        enabled : false,
        floating : false,
        layout : "vertical",
        itemStyle : {
            color : "#000000",
            fontWeight : "normal",
            fontStyle : "normal",
            textDecoration : "none",
            fontFamily : "Arial, Helvetica, sans-serif",
            fontSize : "11px"
        },
        shadow : false,
        verticalAlign : "bottom"
    },
    yAxis : {

        gridLineWidth : 1,
        gridLineColor : "#CECECE",
        labels : {
            enabled : true,
            style : {
                color : "#000000",
                fontWeight : "normal",
                fontStyle : "normal",
                textDecoration : "none",
                fontFamily : "Arial, Helvetica, sans-serif",
                fontSize : "11px"
            }
        },
        lineWidth : 0,
        title : {
            text : ""
        }
    },
    xAxis : {
        gridLineWidth : 0,
        gridLineColor : "#CECECE",
        labels : {
            enabled : true,
            style : {
                color : "#000000",
                fontWeight : "normal",
                fontStyle : "normal",
                textDecoration : "none",
                fontFamily : "Arial, Helvetica, sans-serif",
                fontSize : "11px"
            }
        },
        lineWidth : 1,
        title : {
            text : ""
        },
        tickLength : 10,
        categories : ["Lorem","ipsum","dolor","sit","amet,","consectetur","adipiscing","elit.","Etiam","sit","amet","vulputate","erat.","Ut","ultrices,","magna","luctus","elementum","hendrerit,","diam","erat","placerat","eros,","ac","sagittis"]
    },
    series : [{
            name : "etab",
            type : "bar",
            data : [2,10,11,29,56,3,10,40,6,25,28,17,19,7,27,7,14,46,20,49,3,13,3,31,12,13],
            dataLabels : {
                enabled : true,
                inside : false,
                style : {
                    color : "#000000",
                    fontWeight : "normal",
                    fontStyle : "normal",
                    textDecoration : "none",
                    fontFamily : "Arial, Helvetica, sans-serif",
                    fontSize : "11px"
                },
                formatter : function () {
                    return this.y + ""
                }
            },
            colorByPoint : true,
            zIndex : 1
        }
    ]
});});

Answer 1

对于条形标签，只需添加allowOverlap: true,，就像这样

 dataLabels : {
     allowOverlap: true,
     ...

文档参考 - http://api.highcharts.com/highcharts#plotOptions.area.dataLabels.allowOverlap

小提琴 - http://jsfiddle.net/ezjm3dch/

对于y轴标签，您必须减小xAxis字体大小，如此

xAxis : {
    ...
    labels : {
        ....
        style : {
            ...
            fontSize : "8px"

对于较大的字体大小，轴标签自动调整使中间的标签消失，以避免任何重叠 - 我没有看到任何显示选项

小提琴 - http://jsfiddle.net/jwu1b5jx/

Answer 2

Highcharts可防止轴标签重叠。可以使用tickPositioner更改此设置。示例：http://jsfiddle.net/y4aoua4t

API参考了解更多信息：http://api.highcharts.com/highcharts#xAxis.tickPositioner

如何在BarChart中强制显示yAxis上的每个标签

2 个答案: