增加X轴标题的宽度在highcharts条形图

Question

我试图用Highcharts条形图。在下面的代码，我们有x轴类别，如：[“名1”，“名称2”，“NAME3”，“NAME4”]。

首先，我使用下面的highcharts代码在本地做出反应，开发iOS应用。

我试图把名称在每个单独的酒吧在图表（柱状图），这是工作，但是当从类别数组名称文本v.large那么标题的宽度是没有得到提高和文字来了在多行与最小宽度。如果名称是v.large那么只有我们正在图上的点文字。

我们可以增加标题的宽度是多少？如果是这样，我们如何能提高iPhone的宽度内的宽度。

chart: {
                type: 'bar',
                reflow: true,
                marginRight: 30,
            },
            credits: {
                enabled: false
            },
            title: {
                align: "left",
                text: "A comparison of the business’ digital health with that of the competitors.",
                backgroundColor:'green',
                style: {
                    color: '#808080',
                    fontWeight: '400',
                    fontSize: '13px',
                }
            },
             xAxis: {
             categories: ['Name1', 'Name2', 'Name3', 'Name4' ],
             title: {
                    align: "left",
                },
                scrollbar: {
                    enabled: false
                },
                labels: {
                    x: 25,
                    y: -22,
                    align: 'left',
                    useHTML: true,
                    style: {
                        fontSize: '13px',
                        fontFamily: 'Open Sans',
                        color: '#464646',
                        backgroundColor: 'green',
                    },
                },
             },
             yAxis: {
             gridLineColor: "transparent",
             stackLabels: {
                    qTotals: [91,99,85,99],
                    enabled: true,
                    useHTML: true,
                    style: {
                        fontWeight: "bold",
                    },
                    formatter: function () {
                        return this.options.qTotals[this.x];
                    },
                },
                tickInterval: 20,
                labels: {
                    enabled: false
                },
                plotOptions: {
                series: {
                    dataLabels: {
                        align: 'center',
                        enabled: false,
                        crop: false,
                        overflow: 'none',
                        verticalAlign: 'top',
                        y: -50,
                        style: {
                            fontWeight: '300',
                            color: '#808080',
                            fontSize: '30px',
                        }
                    },
                    pointWidth: 25,
                    borderWidth: 0,
                    pointPadding: 10,
                    stacking: "normal",
                    states: {
                        hover: {
                            enabled: false
                        }
                    },
                    //cursor: 'pointer',
                    point: {
                        events: {
                            click: function (event) {
                            }
                        }
                    }
                }
            },
            series: [
                {
                    name: "",
                    data: [3, 1, 15, 1],
                    color: "#f5f6f8",
                    dataLabels: {
                        enabled: false
                    },
                },
                {
                    name: "",
                    color: "#ff0000",
                    data: [{ y: 97, color: "#0f875a" }, { y: 99, color: "#0f875a" }, { y: 85, color: "#0f875a" }, { y: 99, color: "#0f875a" }]
                }
            ],
             }

对于一个样本我已经采取的曲线图即条形图从Highcharts，在链接jsfiddle.net/psre6Lj9/1我们有一些水果名称，其中“苹果”宽度是不够的，所述文本被显示在多条线。我想增加标题的宽度。我怎样才能做到这一点。

Answer 1

为了增加标签的宽度，设置合适的款式：

xAxis: {
    categories: ['Apples Apples Apples Apples Apples Apples Apples ', 'Oranges', 'Pears', 'Grapes', 'Bananas'],
    labels: {
        x: 25,
        y: -22,
        align: 'left',
        style: {
            width: '300px'
        }
    }
}

现场演示：https://jsfiddle.net/BlackLabel/went9xmf/

API：https://api.highcharts.com/highcharts/xAxis.labels.style