Blazor ApexCharts：如何配置让X轴显示重复值？

默认情况下，ApexCharts的类别轴会自动合并重复的X轴值，导致你的重复日期只显示一次。可以通过以下两种方法解决：

方案一：手动指定X轴分类并开启重复标签显示 #

直接将所有数据的日期（包含重复项）设置为X轴的分类列表，并开启显示重复标签的配置：

<ApexChart TItem="DataItem" Title="Measurement(mm)" Options="@chartOptions">
    <ApexPointSeries TItem="DataItem"
                     Items="datas"
                     Name="Measurement"
                     SeriesType="SeriesType.Line"
                     XValue="@(e=>e.date)"
                     YValue="@(e=>e.value)" />
</ApexChart>

@code {
    private ApexChartOptions<DataItem> chartOptions;

    protected override void OnInitialized()
    {
        chartOptions = new ApexChartOptions<DataItem>
        {
            Xaxis = new XAxis
            {
                // 手动传入包含重复日期的分类列表
                Categories = datas.Select(d => d.date).ToList(),
                Labels = new XAxisLabels
                {
                    // 强制显示重复的标签
                    ShowDuplicates = true
                }
            }
        };
        base.OnInitialized();
    }

    // 你的DataItem定义和数据源
    public class DataItem
    {
        public string date { get; set; } = string.Empty;
        public int value { get; set; }
        public int id { get; set; }
    }

    List<DataItem> datas = new List<DataItem> 
    {
        new DataItem { date = "2023-03-20 01:39:03", value = 3 },
        new DataItem { date = "2023-03-20 01:39:03", value = 4 },
        new DataItem { date = "2023-03-20 01:39:03", value = 3 },
        new DataItem { date = "2023-03-20 01:39:03", value = 5 },
        new DataItem { date = "2023-03-20 01:39:03", value = 5 },
        new DataItem { date = "2023-03-20 01:39:03", value = 6 },
        new DataItem { date = "2023-03-20 01:39:03", value = 7 },
        new DataItem { date = "2023-03-20 01:39:03", value = 9 },
        new DataItem { date = "2023-03-20 01:39:03", value = 13 }
    };
}

方案二：使用唯一ID作为X值，自定义标签显示日期 #

利用每个数据项的唯一id作为X轴的实际值，通过标签格式化器将其转换为日期显示，确保每个数据点都有独立的X轴项：

<ApexChart TItem="DataItem" Title="Measurement(mm)" Options="@chartOptions">
    <ApexPointSeries TItem="DataItem"
                     Items="datas"
                     Name="Measurement"
                     SeriesType="SeriesType.Line"
                     XValue="@(e=>e.id)"
                     YValue="@(e=>e.value)" />
</ApexChart>

@code {
    private ApexChartOptions<DataItem> chartOptions;

    protected override void OnInitialized()
    {
        chartOptions = new ApexChartOptions<DataItem>
        {
            Xaxis = new XAxis
            {
                Labels = new XAxisLabels
                {
                    // 根据ID匹配对应的日期显示
                    Formatter = (value) => 
                    {
                        var item = datas.FirstOrDefault(d => d.id == int.Parse(value.ToString()));
                        return item?.date ?? string.Empty;
                    }
                }
            }
        };
        base.OnInitialized();
    }

    // 确保每个DataItem有唯一ID
    public class DataItem
    {
        public string date { get; set; } = string.Empty;
        public int value { get; set; }
        public int id { get; set; }
    }

    List<DataItem> datas = new List<DataItem> 
    {
        new DataItem { id=1, date = "2023-03-20 01:39:03", value = 3 },
        new DataItem { id=2, date = "2023-03-20 01:39:03", value = 4 },
        new DataItem { id=3, date = "2023-03-20 01:39:03", value = 3 },
        new DataItem { id=4, date = "2023-03-20 01:39:03", value = 5 },
        new DataItem { id=5, date = "2023-03-20 01:39:03", value = 5 },
        new DataItem { id=6, date = "2023-03-20 01:39:03", value = 6 },
        new DataItem { id=7, date = "2023-03-20 01:39:03", value = 7 },
        new DataItem { id=8, date = "2023-03-20 01:39:03", value = 9 },
        new DataItem { id=9, date = "2023-03-20 01:39:03", value = 13 }
    };
}

说明 #

• 方案一适合直接复用现有日期字段，无需修改数据源ID；
• 方案二更稳定，因为每个数据点有唯一的X轴标识，避免ApexCharts自动合并相同值。

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