在 highcharts 的条形图中增加 Xaxis 标题的宽度

Question

我正在尝试使用 Highcharts 绘制条形图。在下面的代码中，我们有 xaxis 类别，例如：['Name1'、'Name2'、'Name3'、'Name4' ].

首先，我在 React Native 中使用下面的 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 中获取了一个图表，即条形图，在 link jsfiddle.net/psre6Lj9/1 中，我们有一些水果名称，其中 'Apples' 宽度不够，文本以多行显示。我想增加标题的宽度。我该怎么做。

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

在 highcharts 的条形图中增加 Xaxis 标题的宽度

Increase width of Xaxis title in bar chart in highcharts

react-native

highcharts

react-native-ios

react-highcharts