Blazor ApexCharts DarkMode 工具提示和工具栏不可见

Question

Blazor ApexCharts Nuget 包在深色模式下，工具提示和工具栏不可见。 图表灯光模式

图表深色模式

@page "/myApprovals"

<MudGrid>
    <MudItem xs="12" sm="6">
         <div Style="height:300px;background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(232,229,231,1) 100%);">
<ApexChart TItem="Order"
           Title="Detailed Risk view for each application"
           Options=options>

    <ApexPointSeries TItem="Order"
                     Items="Orders"
                     Name="Average Value"
                     XValue="e => e.Category"
                     SeriesType="SeriesType.Bar"
                     YValue="e => e.Average"
                     OrderByDescending="e=>e.Y"
                     Color="#003399" />

</ApexChart>
</div>
</MudItem></MudGrid>

@code {
    private ApexChartOptions<Order> options;
    private List<Order> Orders { get; set; } = new List<Order>();

    private Dictionary<string, int> averageMap = new Dictionary<string, int>
    {

        { "Mitigation Plan to complete", 2 },
        { "Request where additional information is required", 2 },
        { "Assessment summary yet to be acknowledged", 1 },
        { "Saved and Draft Assessments", 2 },
        { "Assessments pending for approvals", 3 },
   
    };

    protected override void OnInitialized()
    {
        Orders = new List<Order>();

        foreach (var item in averageMap)
        {
            Orders.Add(new Order { Category = item.Key, Average = item.Value });
        }
        base.OnInitialized();
        options = new ApexChartOptions<Order>
            {
                PlotOptions = new PlotOptions
                {
                    Bar = new PlotOptionsBar
                    {

                        Horizontal = true
                    }
                },
                Theme = new Theme
                {
                    Mode = Mode.Light,
                    Palette = PaletteType.Palette1
                }
            };
    }
    public class Order
    {
        public string Category { get; set; }
        public int Average { get; set; }
    }

} 

我尝试将 Apexchart 始终设置为浅色模式，以便工具提示和工具栏可见，但切换到深色模式时，我的工具提示和工具栏文本颜色从黑色变为白色。现在，我已经使用 css 样式修复了这个问题

<style>
.apexcharts-tooltip {
    background: #f3f3f3;
    color: black;
}

.apexcharts-menu {
    color: black;
}

如何解决这个问题？

Answer 1

使用

SeriesType.Bar

并设置

 Xaxis = new XAxis
 {
         TickPlacement = TickPlacement.On  <<< (Set this)
 },

然后工具顶部就会出来