如何使用 blazor 在顶点图表中加载数据之前将图例放在图表底部？

Question

我创建了一个简单的顶点图表组件，使用 blazor.here 是我的代码组件。

<ApexChart @ref=_detailsChart TItem="SalesByLocationResponse"
           Title="Order Gross Value "
           Debug>

          <ApexPointSeries TItem="SalesByLocationResponse"
                           Items="salesBylocation"
                           Name="Stocks"
                           SeriesType="SeriesType.Donut" 
                           XValue="@(e => e.Location.CodeName)"
                           YValue="@(e => e.TotalSalesAmt)"
                           OrderByDescending="e=>e.X"/>

</ApexChart>

但图例总是位于圆环图的右侧。像这样

现在我需要将图例放在 bottom.How 我可以这样做吗？？

Answer 1

您可以使用 ApexChartOptions 来控制图例外观。

<ApexChart TItem="Order"
           Title="Order Gross Value"
           Options=options>

    <ApexPointSeries TItem="Order"
                     Items="orders"
                     Name="Gross Value"
                     SeriesType="SeriesType.Pie"
                     XValue="@(e => e.Country)"
                     YAggregate="@(e => e.Sum(e => e.GrossValue))"
                     OrderByDescending="e=>e.X" />
</ApexChart>


@code {
private List<Order> orders { get; set; } = SampleData.GetOrders();
private ApexChartOptions<Order> options { get; set; } = new();

protected override void OnInitialized()
{
    options.Legend = new Legend { Position = LegendPosition.Bottom, FontSize ="20px", HorizontalAlign = Align.Center };
}
}

如何使用 blazor 在顶点图表中加载数据之前将图例放在图表底部？

How to put the legend at the bottom of the chart before load of data in apex chart using blazor?

blazor

apexcharts