如何从 Apexchart 的 blazor 包装器获取逗号分隔值

Question

我已经使用 ApexChart 创建了一个简单的图表。下面你可以看到它的截图

我的顶点图表组件剃刀文件是这个。

    <ApexChart @ref=_detailsChart TItem="ActualVsBudgetedIncomeResponse"
                              Title="ACTUAL VS BUDGETED INCOME"
                              Debug>

                                  <ApexPointSeries TItem="ActualVsBudgetedIncomeResponse"
                                                   Items="response_for_actual_vs_budgeted_income_Response"
                                                   Name="Actual Income"
                                                   SeriesType="SeriesType.Bar" 
                                                   XValue="@(e => e.YYYY_MM)"
                                                   YValue="@(e => Convert.ToDecimal(e.Income))"
                                                   OrderByDescending="e=>e.X"/>

                                  <ApexPointSeries TItem="ActualVsBudgetedIncomeResponse"
                                                   Items="response_for_actual_vs_budgeted_income_Response"
                                                   Name="Budgeted Income"
                                                   SeriesType="SeriesType.Bar" 
                                                   XValue="@(e => e.YYYY_MM)"
                                                   YValue="@(e => Convert.ToDecimal(e.BgtIncome))"
                                                   OrderByDescending="e=>e.X"/>

 </ApexChart>

在上图中，可以看到实际的收入值并不是comma-separated值。这些值有时很难阅读。预算收入是这样的。

让我们考虑一下 Actual-Income 值，此 YValue="@(e => Convert.ToDecimal(e.Income))" 行负责获取实际收入值。我从数据库中以 double 类型获得此收入。所以我必须将它转换为 decimal 类型以包含在此处。

然而，我的最终要求是 获得 comma-separated 实际收入和预算收入的价值（例如，我应该获得 29,321,000 为上表中的标记值）。我该怎么做？？请帮帮我。感谢您的所有回答。

Answer 1

你可以传递一些 javascript 作为格式化程序，像这样。

options.Yaxis.Add(new YAxis
        {
            Labels = new AxisLabels
            {
                Formatter = @"function (value) {
                return '$' + Number(value).toLocaleString();}"
            }
        }
    );

如果您使用的是 webassembly，您还可以选择使用 .net 作为格式化程序，使用 FormatYAxisLabel

   <ApexChart TItem="Order"
           Title="Order Net Value"
           FormatYAxisLabel="GetYAxisLabel">


private string GetYAxisLabel(decimal value)
{
    return "$" + value.ToString("N0");
}

详情https://apexcharts.github.io/Blazor-ApexCharts/features/formatters

如何从 Apexchart 的 blazor 包装器获取逗号分隔值

How to get comma separated values from blazor wrapper for Apexchart

c#

currency

blazor

apexcharts

blazor-webassembly