Apexchart：雷达图 - 显示 xaxis 标签的问题

Question

我在使用 Apexcharts 的雷达图时遇到了一些问题。我在文档apexcharts.js - basic radar chart 中定义了我的图表，并且在那里显示了 x 轴标签，而在我的版本中它们没有显示。有人知道我该如何处理吗？这是我的代码：

var options = {
    series: [{
        name: 'Rating',
        data: [4.2, 4.8, 3.1, 3.8, 3.5, 2.9],
    }],
    chart: { toolbar: {
            show: false
        },
        height: 350,
        type: 'radar',
    },
    colors: ['#00b0db'],
    xaxis: {
        categories: ['Meals', 'Location', 'Price', 'Features', 'Ambiance', 'Service']
    },
    dataLabels: {
        enabled: true,
        background: {
            enabled: true,
            borderRadius:2,
        }
    },

};

var chart = new ApexCharts(document.querySelector("#radar-chart-categories"), options);
chart.render();

Here a screenshot of my radar chart unfortunately without showing the x-axis labels

Answer 1

我用你的数据创建了一个 codepen，它看起来很有效：

https://codepen.io/welante/pen/dyWqMZK

window.Apex = {
      tooltip: {
        theme: "dark",
        x: {
          formatter: function (val) {
            return val;
          }
        }
      }
    };
    
    var options = {
        series: [{
            name: 'Rating',
            data: [4.2, 4.8, 3.1, 3.8, 3.5, 2.9],
        }],
        chart: { toolbar: {
                show: false
            },
            height: 350,
            type: 'radar',
        },
        colors: ['#00b0db'],
        xaxis: {
            categories: ['Meals', 'Location', 'Price', 'Features', 'Ambiance', 'Service']
        },
        dataLabels: {
            enabled: true,
            background: {
                enabled: true,
                borderRadius:2,
            }
        },
    
    };
    
    var chart = new ApexCharts(document.querySelector("#radar-chart-categories"), options);
    chart.render();