Highcharts - 长多行y轴标签,导致删除后续标签

时间:2014-05-10 18:05:19

标签: javascript html highcharts

我需要在highcharts条形图的y轴上有一些很长的多行标签。

我的问题是长的多行标签会导致删除以下标签 - 可能是某种内部重叠故障保护。

我正处于增加标签宽度的位置,以便我可以使用换行符控制自己的自动换行(内部自动换行也会产生与丢失标签相同的问题。)

我希望能够关闭此功能并自行处理重叠。

实施例: enter image description here

图表选项:

{
    "colors": [
        "#00AEEF"
    ],
    "credits": {
        "enabled": false
    },
    "chart": {
        "type": "bar"
    },
    "tooltip": {},
    "plotOptions": {
        "column": {
            "pointPadding": 0.2,
            "borderWidth": 0
        },
        "series": {
            "borderWidth": 0,
            "dataLabels": {
                "enabled": true,
                "format": "{point.y:.1f}%"
            }
        }
    },
    "series": [
        {
            "showInLegend": false,
            "data": [
                [
                    "this is a pretty long label <br/>that will most likely cause the next<br/> row not to appear",
                    70
                ],
                [
                    "this is a pretty long label <br/>that will most likely cause the next<br/> row not to appear",
                    62.5
                ],
                [
                    "this is a pretty long label <br/>that will most likely cause the next<br/> row not to appear",
                    41.25
                ],
                [
                    "this is a pretty long label <br/>that will most likely cause the next<br/> row not to appear",
                    26.25
                ],
                [
                    "this is a pretty long label <br/>that will most likely cause the next<br/> row not to appear",
                    18.75
                ],
                [
                    "this is a pretty long label <br/>that will most likely cause the next<br/> row not to appear",
                    11.25
                ],
                [
                    "this is a pretty long label <br/>that will most likely cause the next<br/> row not to appear",
                    7.5
                ],
                [
                    "this is a pretty long label <br/>that will most likely cause the next<br/> row not to appear",
                    3.75
                ],
                [
                    "this is a pretty long label <br/>that will most likely cause the next<br/> row not to appear",
                    3.75
                ]
            ]
        }
    ],
    "xAxis": {
        "minorGridLineWidth": 0,
        "minorTickLength": 0,
        "tickLength": 0,
        "type": "category",
        "labels": {
            "overflow": "justify",
            "style": {
                "color": "#525151",
                "fontSize": "12px",
                "lineHeight": "10%",
                "fontFamily": "Helvetica Neue, Helvetica ,Helvetica,Arial,sans-serif",
                "width": "999px"
            },
            "y": -10
        }
    },
    "yAxis": {
        "min": 0,
        "title": {
            "text": "Percent (%)"
        }
    }
} 

1 个答案:

答案 0 :(得分:7)

只需设置step: 1,请参阅:http://jsfiddle.net/Yrygy/135/

Docs