我正在使用 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
任何人都可以帮助我设计自定义工具提示的样式,使其看起来更像原始工具提示吗? 理想情况下,它会自动提取系列名称,而不是依赖于硬编码字符串(“总价值”和“净值”)。
另外为什么自定义工具提示显示数据点,而标准工具提示图表不显示数据点? 链接的示例显示了这种行为。 我的图表上也有同样的行为。 如果我切换到使用自定义工具提示,我还会将数据点添加到我的折线图中。
你解决过这个问题吗?如果是这样,我很想看看你是如何做到的。 谢谢。