ApexChart折线图：如何配置X轴实现无数据时段直线展示

问题描述 #

我正在使用ApexChart，配置X轴时遇到问题。希望实现下图中无数据时段显示长直线的效果，请问该如何配置？

当前使用的代码如下：

var options = {
                series: [{
                        name: "Level",
                        data: [30,45,50,60,70,91,125]
                    }],
                chart: {
                    height: 350,
                    type: 'line',
                    zoom: {
                        enabled: true
                    }
                },
                dataLabels: {
                    enabled: true
                },
                stroke: {
                    curve: 'straight'
                },
                title: {
                    text: 'Battery',
                    align: 'left'
                },
                grid: {
                    row: {
                        colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
                        opacity: 0.5
                    },
                },
                xaxis: {
                    categories: [1991,1992,1993,1994,1995,1996,1997, 1998,1999]
                }
            };

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

chart.render();

示例效果：

解决方案 #

要实现无数据时段显示长直线的效果，只需做两处关键调整：

• 补充缺失数据的延续值：你的X轴分类有9个，但数据仅7个，把最后一个数据值重复填充到缺失位置，让数据数组长度与X轴分类数量一致。
• 配置实心填充样式：新增fill配置项，设置为实心填充，让延续的数值区域形成连贯的长直线效果。

完整配置代码 #

var options = {
    series: [{
        name: "Level",
        data: [30,45,50,60,70,91,125,125,125] // 补充缺失位置的延续值
    }],
    chart: {
        height: 350,
        type: 'line',
        zoom: {
            enabled: true
        }
    },
    dataLabels: {
        enabled: true
    },
    stroke: {
        curve: 'straight'
    },
    fill: { // 新增填充配置，实现实心直线效果
        type: 'solid',
        colors: ['#33b2df'] // 可自定义颜色，与线条颜色一致更协调
    },
    title: {
        text: 'Battery',
        align: 'left'
    },
    grid: {
        row: {
            colors: ['#f3f3f3', 'transparent'],
            opacity: 0.5
        },
    },
    xaxis: {
        categories: [1991,1992,1993,1994,1995,1996,1997, 1998,1999]
    }
};

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

chart.render();

如果不想手动补充数据，也可以通过动态计算的方式自动补全延续值，但手动填充是最直接精准的实现方式。

内容的提问来源于stack exchange，提问作者Stenly Georgiev