Blazor ApexCharts 自定义工具提示 - 如何像原始工具提示一样设置样式?

问题描述 投票:0回答:1

我正在使用 Blazor ApexCharts 在我的应用程序中制作一些图表,我想使用自定义工具提示,以便我可以向工具提示添加一些附加信息。 我可以从文档中了解如何创建工具提示:(https://apexcharts.github.io/Blazor-ApexCharts/features/tooltip-dotnet)

<DemoContainer>
<ApexChart TItem="Order"
           Title="Order Net Value"
           Options=options>

    <ApexPointTooltip>
        <div class="p-1">

            <h3>@context.DataPoint.X </h3>
                <Row class="mb-2">
                    <RowCol Auto>
                        <Badge style="background-color:#FF0000">Gross Value</Badge>
                    </RowCol>
                    <RowCol Auto>
                        <span class="@(context.SeriesIndex == 0 ? "strong": "")">
                            @context.DataPoint.Items.Sum(e=> e.GrossValue).ToString("n0")
                        </span>
                    </RowCol>
                </Row>

                <Row>
                    <RowCol Auto>
                        <Badge style="background-color:#000080">Net Value</Badge>
                    </RowCol>
                    <RowCol Auto>
                        <span class="@(context.SeriesIndex == 1 ? "strong": "")">
                            @context.DataPoint.Items.Sum(e=> e.NetValue).ToString("n0")
                        </span>
                    </RowCol>
                </Row>
         
        </div>
    </ApexPointTooltip>

    <ChildContent>
        <ApexPointSeries TItem="Order"
                         Items="Orders"
                         Name="Gross Value"
                         SeriesType="SeriesType.Line"
                         XValue="@(e => e.Country)"
                         YAggregate="@(e => e.Sum(e => e.GrossValue))"
                         OrderByDescending="e=>e.Y"
                         Stroke="@(new SeriesStroke { Color = "#FF0000", Width=4})" />

        <ApexPointSeries TItem="Order"
                         Items="Orders"
                         Name="Net Value"
                         SeriesType="SeriesType.Line"
                         XValue="@(e => e.Country)"
                         YAggregate="@(e => e.Sum(e => e.NetValue))"
                         OrderByDescending="e=>e.Y"
                         Stroke="@(new SeriesStroke { Color = "#000080", Width=4})" />
    </ChildContent>
</ApexChart>

我的问题是,这种样式看起来与我在所有其他图表中使用的原始样式完全不同。 下面是一个示例,显示了它的样子:https://apexcharts.github.io/Blazor-ApexCharts/line-charts

任何人都可以帮助我设计自定义工具提示的样式,使其看起来更像原始工具提示吗? 理想情况下,它会自动提取系列名称,而不是依赖于硬编码字符串(“总价值”和“净值”)。

另外为什么自定义工具提示显示数据点,而标准工具提示图表不显示数据点? 链接的示例显示了这种行为。 我的图表上也有同样的行为。 如果我切换到使用自定义工具提示,我还会将数据点添加到我的折线图中。

blazor apexcharts .net-8.0
1个回答
0
投票

你解决过这个问题吗?如果是这样,我很想看看你是如何做到的。 谢谢。

© www.soinside.com 2019 - 2024. All rights reserved.