如何防止 ApexCharts 图表标签倾斜

Question

我正在使用 Django 进行我的项目，我需要使用 Javascript 和图表库。我有两个用 ApexCharts 制作的图表，但我不知道如何防止标签文本倾斜和溢出。我在文档中找不到有关此问题的任何内容，或者我不够熟悉，无法找到我需要的内容。:)\n

\n

var options07 = {\n        series: [{\n        name: \'SOHA\',\n        data: [ {{i.szervkult07a}} ]\n        }, {\n        name: \'RITK\xc3\x81N\',\n        data: [ {{i.szervkult07b}} ]\n        }, {\n        name: \'ID\xc5\x90NK\xc3\x89NT\',\n        data: [ {{i.szervkult07c}} ]\n        }, {\n        name: \'GYAKRAN\',\n        data: [ {{i.szervkult07d}} ]\n        }, {\n        name: \'MINDIG\',\n        data: [ {{i.szervkult07e}} ]\n        }],\n        chart: {\n        type: \'bar\',\n        height: 350,\n        stacked: true,\n        stackType: \'100%\'\n        },\n        responsive: [{\n        breakpoint: 480,\n        options: {\n            legend: {\n            position: \'bottom\',\n            offsetX: -10,\n            offsetY: 0\n            }\n        }\n        }],\n        xaxis: {\n        categories: [\'A c\xc3\xa9g gondot fordi\xcc\x81t az \xc3\xbcgyfelek ige\xcc\x81nyeinek mine\xcc\x81l jobb megismere\xcc\x81se\xcc\x81re\' \n        ],\n        },\n        fill: {\n        opacity: 1\n        },\n        legend: {\n        position: \'right\',\n        offsetX: 0,\n        offsetY: 50\n        },\n        };\n\n        var chart = new ApexCharts(document.querySelector("#chart_szk07"), options07);\n        chart.render();\n\n\nvar options07b = {\n        series: [{\n        name: \'SOHA\',\n        data: [{{i.szervkult07a}}]\n        }, {\n        name: \'RITK\xc3\x81N\',\n        data: [{{i.szervkult07b}}]\n        }, {\n        name: \'ID\xc5\x90NK\xc3\x89NT\',\n        data: [{{i.szervkult07c}}]\n        }, {\n        name: \'GYAKRAN\',\n        data: [{{i.szervkult07d}}]\n        }, {\n        name: \'MINDIG\',\n        data: [{{i.szervkult07e}}]\n        }],\n        chart: {\n        type: \'bar\',\n        height: 350\n        },\n        plotOptions: {\n        bar: {\n            horizontal: false,\n            columnWidth: \'55%\',\n            endingShape: \'rounded\'\n        },\n        },\n        dataLabels: {\n        enabled: false\n        },\n        stroke: {\n        show: true,\n        width: 2,\n        colors: [\'transparent\']\n        },\n        xaxis: {\n        categories: [\'A c\xc3\xa9g gondot fordi\xcc\x81t az \xc3\xbcgyfelek ige\xcc\x81nyeinek mine\xcc\x81l jobb megismere\xcc\x81se\xcc\x81re\'],\n        },\n        yaxis: {\n        title: {\n            text: \'f\xc5\x91\'\n        }\n        },\n        fill: {\n        opacity: 1\n        },\n        tooltip: {\n        y: {\n            formatter: function (val) {\n            return val + " f\xc5\x91"\n            }\n        }\n        }\n        };\n\n        var chart = new ApexCharts(document.querySelector("#chart_szk07b"), options07b);\n        chart.render();\n

\n

Answer 1

从文档中，您应该能够添加rotate: 0到labels以下部分xaxis。我建议尝试缩短这些。我想长标签看起来不如短标签好看。

\n

xaxis: {\n  categories: [\'A c\xc3\xa9g gondot fordi\xcc\x81t az \xc3\xbcgyfelek ige\xcc\x81nyeinek mine\xcc\x81l jobb megismere\xcc\x81se\xcc\x81re\'],\n  labels: {\n    rotate: 0\n  }\n}\n

\n