javascript - Apexcharts 在工具提示中未显示正确的 x 值

Question

我正在尝试渲染一个折线图，工具提示中显示了类别名称。我得到以下折线图：

let dataCurrent = [
{'x': 'FIRST', 'y': 711}, {'x': 'SECOND', 'y': 709}, {'x': 'THIRD', 'y': 522}
]

let options = {
            chart: {
                type: "line",
                fontFamily: 'inherit',
                height: 150.0,
                sparkline: {
                    enabled: true
                },
                animations: {
                    enabled: true
                },
            },
            tooltip: {
                enabled: true,
                onDatasetHover: {
                    highlightDataSeries: true,
                },
                x: {
                    show: true,
                    formatter: function (value) {
                        console.log(value) // This value should be "FIRST", "SECOND" and "THIRD", but it's 1, 2 and 3
                        return value;
                    },
                },
                y: {
                    formatter: function (val) {
                        return Math.floor(val)
                    }
                }
            },
            dataLabels: {
                enable: true,
                position: 'bottom'
            },
            fill: {
                opacity: 1,
            },
            stroke: {
                width: [2, 1],
                dashArray: [0, 3],
                lineCap: "round",
                curve: "smooth",
            },
            series: [{
                name: dataCurrentName,
                data: dataCurrent
            },
            grid: {
                strokeDashArray: 4,
            },
            xaxis: {
                labels: {
                    formatter: function (value) {
                    console.log(value) // This shows the correct category name
                    return value;
                },
                },
                tooltip: {
                    enabled: false,
                },
                type: "category",
            },
            yaxis: {
                labels: {
                    padding: 4
                },
            },

            colors: [primaryColor, secondaryColor],
            legend: {
                show: false,
                position: 'top',
                offsetY: -3
            },
        };

 let chart = new ApexCharts(document.querySelector("#line-chart"), options);

chart.render();

由于某种原因，x 轴的工具提示没有显示 dataCurrent 中 x 的值。无论类别名称是什么，它都会显示序号（1、2、3）。

如果我记录 x 的值xaxis，它会显示正确的值。我究竟做错了什么？

标签： javascriptapexcharts

Answer 1

目前，您仅将值解析为工具提示格式化程序。请参阅文档以了解要在此格式化程序中解析的可用变量。您可以在下面找到一个工作示例，其中 categoryLabel 显示在工具提示中。

请注意，您的代码中也存在一些语法错误。我在下面的工作示例中对它们进行了评论。

如果您想查看所有可用的变量以解析到格式化程序，您可以使用下面的函数：

formatter: function (value, { series, seriesIndex, dataPointIndex, w }) {
console.log(
    "value:", value + '\n' +
    "series:", series + '\n' +
    "seriesIndex:", seriesIndex + '\n' +
    "dataPointIndex:", dataPointIndex + '\n' +
    "w:", w
);
console.log(w.globals.categoryLabels[value - 1]);
return w.globals.categoryLabels[value - 1]
},

//https://apexcharts.com/docs/options/tooltip/

let dataCurrent = [
    {
        'x': 'FIRST',
        'y': 711
    },
    {
        'x': 'SECOND',
        'y': 709
    },
    {
        'x': 'THIRD',
        'y': 522
    },
]

let options = {
    chart: {
        type: "line",
        fontFamily: 'inherit',
        height: 150.0,
        sparkline: {
            enabled: true
        },
        animations: {
            enabled: true
        },
    },
    tooltip: {
        enabled: true,
        onDatasetHover: {
            highlightDataSeries: true,
        },
        x: {
            show: true,
            formatter: function (value, { w }) {
                // Please refer to documentation, available options are: value, series, seriesIndex, dataPointIndex, w, categoryLabels
                console.log(w.globals.categoryLabels[value - 1]);
                return w.globals.categoryLabels[value - 1]
            },
        },
        y: {
            formatter: function (val) {
                return Math.floor(val)
            }
        }
    },
    dataLabels: {
        enable: true,
        position: 'bottom'
    },
    fill: {
        opacity: 1,
    },
    stroke: {
        width: [2, 1],
        dashArray: [0, 3],
        lineCap: "round",
        curve: "smooth",
    },
    series: [{
        // name: dataCurrentName, // ---> ReferenceError: dataCurrentName is not defined
        data: dataCurrent
    }],
    grid: {
        strokeDashArray: 4,
    },
    xaxis: {
        labels: {
            formatter: function (value) {
                console.log(value) // This shows the correct category name
                return value;
            },
        },
        tooltip: {
            enabled: false,
        },
        type: "category",
    },
    yaxis: {
        labels: {
            padding: 4
        },
    },

    // colors: [primaryColor, secondaryColor], // ---> ReferenceError: primaryColor is not defined
    legend: {
        show: false,
        position: 'top',
        offsetY: -3
    },
};

let chart = new ApexCharts(document.querySelector("#line-chart"), options);

chart.render();

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- <link rel="stylesheet" href="style.css"> -->
    <title>Test</title>
</head>
<body>
<div id="line-chart"></div>
</body>
    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
</html>