Увеличьте ширину заголовка Xaxis в гистограмме в старших графиках - PullRequest
Новая
       22

Увеличьте ширину заголовка Xaxis в гистограмме в старших графиках

0 голосов
/ 05 февраля 2019

Я пробую гистограмму, используя Highcharts.В приведенном ниже коде у нас есть категории xaxis, такие как: ['Name1', 'Name2', '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 у нас есть несколько названий фруктов, для которых недостаточно ширины «яблок» и текст отображается в несколько строк.Я хочу увеличить ширину заголовка.Как я могу это сделать.

1 Ответ

0 голосов
/ 06 февраля 2019

Чтобы увеличить ширину надписей, установите правильный стиль: 

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

...