Apexcharts 在 dataLabels 上显示未定义，而它应该是 0

Question

我在 cshtml 页面中使用 apexchart 来制作组合条形图和折线图。在图表的左下角，我希望它为 0，但它显示“infinityundefined”。怎么才能变成0呢？

我记录了相应月份的值。这是我的代码：

格式化数字和显示图表的功能

function displayBarAndLineChart(arrayOfQuantities, arrayOfValues, categoriesArray, series1Name, series2Name) {
    var options = {
        series: [{
            name: series1Name,
            type: 'bar',
            data: arrayOfQuantities
        }, {
            name: series2Name,
            type: 'line',
            data: arrayOfValues
        }],
        chart: {
            height: 350,
            type: 'line',
        },
        stroke: {
            width: [0, 4]
        },
        dataLabels: {
            enabled: true,
            formatter: function (value) {
                console.log(formatNumber(value));
                return formatNumber(value);
            }
        },
        xaxis: {
            categories: categoriesArray
        },
        yaxis: [{
            title: {
                text: series1Name,
            },
            labels: {
                formatter: function (value) {
                    return formatNumber(value);
                }
            }
        }, {
            opposite: true,
            title: {
                text: series2Name
            },
            labels: {
                formatter: function (value) {
                    return formatNumber(value);
                }
            }
        }]
    };

    var chart = new ApexCharts(document.querySelector("#barAndLineChart"), options);
    chart.render();
}

function formatNumber(number) {
    if (number === 0) return "0"; // Return "0" for zero value

    // Define suffixes for different magnitudes
    const suffixes = ['', 'K', 'M', 'B', 'T'];

    // Determine the magnitude of the number
    const magnitude = Math.floor(Math.log10(Math.abs(number)) / 3);

    // Calculate the formatted number
    const formattedNumber = (number / Math.pow(10, magnitude * 3)).toFixed(1);

    // If the formatted number ends with ".0", convert it to an integer
    const finalNumber = formattedNumber.endsWith('.0') ? parseInt(formattedNumber) : formattedNumber;

    // Return the formatted number with suffix
    return finalNumber + suffixes[magnitude];
}

调用这些函数（我在 html 中的脚本标签中编写了这些函数）：

window.onload = function() {
    var dataQuantity = @Html.Raw(soLuongHoaDonsJson);
    var dataValue = @Html.Raw(giaTriHoaDonJson);
    var categories = ["01/" + @(selectedYear!=null ? selectedYear : now.Year),
                    "02/" + @(selectedYear!=null ? selectedYear : now.Year),
                    "03/" + @(selectedYear!=null ? selectedYear : now.Year),
                    "04/" + @(selectedYear!=null ? selectedYear : now.Year),
                    "05/" + @(selectedYear!=null ? selectedYear : now.Year),
                    "06/" + @(selectedYear!=null ? selectedYear : now.Year),
                    "07/" + @(selectedYear!=null ? selectedYear : now.Year),
                    "08/" + @(selectedYear!=null ? selectedYear : now.Year),
                    "09/" + @(selectedYear!=null ? selectedYear : now.Year),
                    "10/" + @(selectedYear!=null ? selectedYear : now.Year),
                    "11/" + @(selectedYear!=null ? selectedYear : now.Year),
                    "12/" + @(selectedYear!=null ? selectedYear : now.Year)];
    displayBarAndLineChart(dataQuantity, dataValue, categories, "Số lượng hóa đơn", "Tổng giá trị")
}

在这种情况下，dataQuantity 是数组 [0,0,0,0,0,0,0,0,0,0,0,1]，dataValue 是 [0,0,0,0,0,0,0 ,0,0,0,0,209.46].

我在类别的每个元素上尝试了@Html.Raw，但它不起作用

我尝试记录相应月份的值

Answer 1

我通过将 JavaScript Math.floor() 应用于左侧标签而不是使用我自己的格式函数解决了这个问题

yaxis: [{
    title: {
        text: series1Name,
    },
    labels: {
        formatter: function (value) {
            return Math.floor(value);
        }
    }
}, {
    opposite: true,
    title: {
        text: series2Name
    },
    labels: {
        formatter: function (value) {
            return formatNumber(value);
        }
    }
}]