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拍摄了一个图表，即条形图，在链接jsfiddle.net/psre6Lj9/1中，我们有一些水果名称，其中“ Apples”的宽度不足，并且文本以多行显示。我想增加标题的宽度。我该怎么办。

Answer 1

要增加标签的宽度，请设置正确的样式：

waitpid()

实时演示：https://jsfiddle.net/BlackLabel/went9xmf/

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

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

1 个答案: