如何防止 ApexCharts 图表标签倾斜

Question

我正在使用 Django 开发我的项目，我需要使用 Javascript 和图表库。我有两个用 ApexCharts 制作的图表，但我不知道如何防止标签文本倾斜和溢出。我在文档中找不到关于这个问题的任何信息，或者我不够熟悉，无法找到我需要的东西。 :)

var options07 = {
        series: [{
        name: 'SOHA',
        data: [ {{i.szervkult07a}} ]
        }, {
        name: 'RITKÁN',
        data: [ {{i.szervkult07b}} ]
        }, {
        name: 'IDŐNKÉNT',
        data: [ {{i.szervkult07c}} ]
        }, {
        name: 'GYAKRAN',
        data: [ {{i.szervkult07d}} ]
        }, {
        name: 'MINDIG',
        data: [ {{i.szervkult07e}} ]
        }],
        chart: {
        type: 'bar',
        height: 350,
        stacked: true,
        stackType: '100%'
        },
        responsive: [{
        breakpoint: 480,
        options: {
            legend: {
            position: 'bottom',
            offsetX: -10,
            offsetY: 0
            }
        }
        }],
        xaxis: {
        categories: ['A cég gondot fordít az ügyfelek igényeinek minél jobb megismerésére' 
        ],
        },
        fill: {
        opacity: 1
        },
        legend: {
        position: 'right',
        offsetX: 0,
        offsetY: 50
        },
        };

        var chart = new ApexCharts(document.querySelector("#chart_szk07"), options07);
        chart.render();


var options07b = {
        series: [{
        name: 'SOHA',
        data: [{{i.szervkult07a}}]
        }, {
        name: 'RITKÁN',
        data: [{{i.szervkult07b}}]
        }, {
        name: 'IDŐNKÉNT',
        data: [{{i.szervkult07c}}]
        }, {
        name: 'GYAKRAN',
        data: [{{i.szervkult07d}}]
        }, {
        name: 'MINDIG',
        data: [{{i.szervkult07e}}]
        }],
        chart: {
        type: 'bar',
        height: 350
        },
        plotOptions: {
        bar: {
            horizontal: false,
            columnWidth: '55%',
            endingShape: 'rounded'
        },
        },
        dataLabels: {
        enabled: false
        },
        stroke: {
        show: true,
        width: 2,
        colors: ['transparent']
        },
        xaxis: {
        categories: ['A cég gondot fordít az ügyfelek igényeinek minél jobb megismerésére'],
        },
        yaxis: {
        title: {
            text: 'fő'
        }
        },
        fill: {
        opacity: 1
        },
        tooltip: {
        y: {
            formatter: function (val) {
            return val + " fő"
            }
        }
        }
        };

        var chart = new ApexCharts(document.querySelector("#chart_szk07b"), options07b);
        chart.render();

Answer 1

From the docs，您应该可以将 rotate: 0 添加到 xaxis 的 labels 部分。我建议尝试缩短这些。我想长标签会不如短标签好看。

xaxis: {
  categories: ['A cég gondot fordít az ügyfelek igényeinek minél jobb megismerésére'],
  labels: {
    rotate: 0
  }
}

如何防止 ApexCharts 图表标签倾斜

How to prevent an ApexCharts chart label from being slanted

javascript

apexcharts