javascript - 顶点图表折线图仅在第一个月不显示数据标签

问题描述

由于某种原因，ApexChart 没有在我的折线图上显示数据标签。

好像图表的JS比较简单：

var options = {
    chart: {
        height: 380,
        type: 'line',
        zoom: {
            enabled: false
        },
        toolbar: {
            show: false
        },
        dropShadow: {
            enabled: true,
            top: 10,
            left: 0,
            bottom: 0,
            right: 0,
            blur: 2,
            color: '#45404a2e',
            opacity: 0.35
        },
    },
    colors: ['#1ecab8', '#56b9db', '#ffb66e', '#eb3131', '#373d3f'],
    dataLabels: {
        enabled: true,
    },
    stroke: {
        width: [3, 3, 3, 3, 3],
        curve: 'smooth'
    },
    series: [{
        name: "Informational",
        data: [5,10,15,20]
    },
    {
        name: "Low",
        data: [2,3,4,5]
    },
    {
        name: "Medium",
        data: [9,0,2,3]
    },
    {
        name: "High",
        data: [1,2,3,4]
    },
    {
        name: "Critical",
        data: [0,0,0,10]
    }
    ],
    title: {
        text: 'Reported Findings',
        align: 'left',
        style: {
            fontSize: "14px",
            color: '#ffffff'
        }
    },
    grid: {
        row: {
            colors: ['transparent', 'transparent'], // takes an array which will be repeated on columns
            opacity: 0.2
        },
        borderColor: '#f1f3fa'
    },
    markers: {
        style: 'inverted',
        size: 6
    },
    xaxis: {
        categories: <%= raw @series_months %>,
        axisBorder: {
            show: true,
            color: '#bec7e0',
        },
        axisTicks: {
            show: true,
            color: '#bec7e0',
        },
    },
    yaxis: {
        min: 0,
        max: 50
    },
    legend: {
        position: 'top',
        horizontalAlign: 'right',
        floating: true,
        offsetY: -25,
        offsetX: 5
    },
    responsive: [{
        breakpoint: 600,
        options: {
            chart: {
                toolbar: {
                    show: false
                }
            },
            legend: {
                show: false
            },
        }
    }]
}

var chart = new ApexCharts(
    document.querySelector("#<%= @chart_id %>"),
    options
);

chart.render();

我错过了什么导致它无法正确显示？这没有意义，因为如果我将第一个数组中的一个从 9 更改为 10，那么它会显示得很好：

标签： javascriptapexcharts

javascript - 顶点图表折线图仅在第一个月不显示数据标签

问题描述

解决方案

推荐阅读