如何在Blazorise Charts中用C#自定义Tooltip及设置回调

一、C#委托实现Label回调 #

完全可以通过C#委托配置Tooltip的Label回调，Blazorise会自动将委托映射为ChartJS可识别的JS函数，只需匹配正确的委托参数类型（不同图表类型的TooltipItem泛型略有差异）。

以折线图（LineChart）为例，配置示例：

protected LineChartOptions ChartOptions { get; set; }

protected override void OnInitialized()
{
    base.OnInitialized();

    ChartOptions = new LineChartOptions
    {
        Tooltip = new ChartTooltip
        {
            Callbacks = new ChartTooltipCallbacks
            {
                // 自定义Label回调委托
                Label = (tooltipItem, datasets, index) =>
                {
                    // 获取当前数据点和数据集信息
                    var targetDataset = datasets.ElementAt(tooltipItem.DatasetIndex);
                    var targetValue = targetDataset.Data.ElementAt(tooltipItem.Index);
                    // 返回自定义提示文本
                    return $"[{targetDataset.Label}] 当前值：{targetValue} (索引：{index})";
                }
            }
        }
    };
}

注意：如果是柱状图（BarChart），需使用BarChartTooltipItem作为委托的第一个参数类型，确保参数匹配对应图表的TooltipItem结构。

二、其他自定义Tooltip的方法 #

如果C#委托映射无法满足复杂需求，还可以通过以下方式实现：

1. 直接注入JS代码（Raw属性） #

Blazorise的Chart配置类提供了带Raw后缀的属性，允许直接传入JS函数字符串，绕过C#委托映射，适合需要复杂JS逻辑的场景：

ChartOptions = new LineChartOptions
{
    Tooltip = new ChartTooltip
    {
        Callbacks = new ChartTooltipCallbacks
        {
            // 直接编写JS回调函数
            LabelRaw = @"function(tooltipItem, chart) {
                const dataset = chart.datasets[tooltipItem.datasetIndex];
                return `JS自定义提示：${dataset.label} - ${tooltipItem.raw}`;
            }"
        }
    }
};

2. 完全自定义HTML Tooltip #

若需要HTML结构的复杂提示框，可以禁用ChartJS默认Tooltip，结合Blazor组件+JS互操作实现：

步骤1：禁用默认Tooltip

ChartOptions = new LineChartOptions
{
    Tooltip = new ChartTooltip { Enabled = false }
};

步骤2：添加自定义Tooltip组件

<!-- 自定义Tooltip容器 -->
<div style="position: absolute; z-index: 999; @TooltipStyle; display: @TooltipDisplay;">
    <div class="bg-dark text-white p-2 rounded">@TooltipContent</div>
</div>

<!-- 图表组件 -->
<LineChart @ref="chartRef" Options="ChartOptions" Data="ChartData" />

步骤3：C#逻辑+JS互操作

private LineChart chartRef;
private string TooltipStyle = "";
private string TooltipDisplay = "none";
private MarkupString TooltipContent;

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        // 注册JS事件监听
        await JSRuntime.InvokeVoidAsync("setupCustomChartTooltip", chartRef.ElementId, DotNetObjectReference.Create(this));
    }
}

[JSInvokable]
public void ShowCustomTooltip(int x, int y, string content)
{
    TooltipStyle = $"left: {x + 15}px; top: {y + 15}px;";
    TooltipDisplay = "block";
    TooltipContent = new MarkupString(content);
    StateHasChanged();
}

[JSInvokable]
public void HideCustomTooltip()
{
    TooltipDisplay = "none";
    StateHasChanged();
}

步骤4：JS代码（wwwroot/js/chart-tooltip.js）

function setupCustomChartTooltip(chartId, dotNetRef) {
    const chart = Chart.getChart(chartId);
    const canvas = chart.canvas;

    // 鼠标移动监听
    canvas.addEventListener('mousemove', (e) => {
        const points = chart.getElementsAtEventForMode(e, 'nearest', { intersect: true }, true);
        if (points.length > 0) {
            const point = points[0];
            const dataset = chart.data.datasets[point.datasetIndex];
            const value = dataset.data[point.index];
            // 构造HTML内容
            const tooltipContent = `<strong>${dataset.label}</strong><br/>数值：${value}`;
            // 调用C#方法显示Tooltip
            dotNetRef.invokeMethodAsync('ShowCustomTooltip', e.offsetX, e.offsetY, tooltipContent);
        } else {
            dotNetRef.invokeMethodAsync('HideCustomTooltip');
        }
    });

    // 鼠标离开监听
    canvas.addEventListener('mouseleave', () => {
        dotNetRef.invokeMethodAsync('HideCustomTooltip');
    });
}

内容的提问来源于stack exchange，提问作者Gyuzal