如何在Blazorise Chart Streaming中将X轴改为0-1000数值并保留动画

要实现X轴显示0到1000的数值并保留流式动画效果，需要从数据源替换、X轴配置和流式插件参数调整三个方面修改代码，具体如下：

关键修改点 #

• 新增计数器变量跟踪X轴数值，实现0-1000循环递增
• 配置Chart的X轴为线性类型，固定范围0-1000
• 调整ChartStreaming选项适配数值轴的流式更新逻辑

修改后的完整代码 #

<LineChart @ref="horizontalLineChart" Options="@horizontalLineChartOptions">
    <ChartStreaming @ref="@chartStreaming"
                    TItem="LiveDataPoint"
                    Options="new ChartStreamingOptions { Delay = 2000, ScrollMode = ScrollMode.Immediate }"
                    Refreshed="@OnHorizontalLineRefreshed" />
</LineChart>

<Row>
    <Column>
        <Button Color="Color.Primary" Clicked="@(()=>chartStreaming.Pause())">Pause</Button>
        <Button Color="Color.Primary" Clicked="@(()=>chartStreaming.Play())">Play</Button>
    </Column>
</Row>

@code{
    LineChart<LiveDataPoint> horizontalLineChart;
    ChartStreaming<LiveDataPoint> chartStreaming;
    Random random = new Random( DateTime.Now.Millisecond );
    // 新增X轴计数器，用于生成0-1000的数值
    private int xCounter = 0;

    string[] Labels = { "Red", "Blue", "Yellow", "Green", "Purple", "Orange" };
    List<string> backgroundColors = new List<string> { ChartColor.FromRgba( 255, 99, 132, 0.2f ), ChartColor.FromRgba( 54, 162, 235, 0.2f ), ChartColor.FromRgba( 255, 206, 86, 0.2f ), ChartColor.FromRgba( 75, 192, 192, 0.2f ), ChartColor.FromRgba( 153, 102, 255, 0.2f ), ChartColor.FromRgba( 255, 159, 64, 0.2f ) };
    List<string> borderColors = new List<string> { ChartColor.FromRgba( 255, 99, 132, 1f ), ChartColor.FromRgba( 54, 162, 235, 1f ), ChartColor.FromRgba( 255, 206, 86, 1f ), ChartColor.FromRgba( 75, 192, 192, 1f ), ChartColor.FromRgba( 153, 102, 255, 1f ), ChartColor.FromRgba( 255, 159, 64, 1f ) };

    public struct LiveDataPoint
    {
        public object X { get; set; }
        public object Y { get; set; }
    }

    // 修改图表配置，添加X轴线性范围设置
    object horizontalLineChartOptions = new
    {
        Scales = new
        {
            X = new
            {
                Type = "linear",
                Min = 0,
                Max = 1000,
                Title = new
                {
                    Display = true,
                    Text = "X Value"
                }
            },
            Y = new
            {
                Title = new
                {
                    Display = true,
                    Text = "Value"
                }
            }
        },
        Interaction = new
        {
            intersect = false
        }
    };

    protected override async Task OnAfterRenderAsync( bool firstRender )
    {
        if ( firstRender )
        {
            await Task.WhenAll(
                HandleRedraw( horizontalLineChart, GetLineChartDataset1 ) );
        }
    }

    async Task HandleRedraw<TDataSet, TItem, TOptions, TModel>( BaseChart<TDataSet, TItem, TOptions, TModel> chart, params Func<TDataSet>[] getDataSets )
        where TDataSet : ChartDataset<TItem>
        where TOptions : ChartOptions
        where TModel : ChartModel
    {
        await chart.Clear();
        await chart.AddLabelsDatasetsAndUpdate( Labels, getDataSets.Select( x => x.Invoke() ).ToArray() );
    }

    LineChartDataset<LiveDataPoint> GetLineChartDataset1()
    {
        return new LineChartDataset<LiveDataPoint>
        {
            Data = new List<LiveDataPoint>(),
            Label = "Dataset 1 (linear interpolation)",
            BackgroundColor = backgroundColors[0],
            BorderColor = borderColors[0],
            Fill = false,
            Tension = 0,
            BorderDash = new List<int> { 8, 4 },
        };
    }

    // 修改数据生成逻辑，用计数器生成0-1000的X值
    Task OnHorizontalLineRefreshed( ChartStreamingData<LiveDataPoint> data )
    {
        data.Value = new LiveDataPoint
        {
            X = xCounter,
            Y = RandomScalingFactor(),
        };

        // 到达1000后重置计数器，实现循环流式展示
        xCounter = xCounter >= 1000 ? 0 : xCounter + 1;

        return Task.CompletedTask;
    }

    double RandomScalingFactor()
    {
        return ( random.NextDouble() > 0.5 ? 1.0 : -1.0 ) * Math.Round( random.NextDouble() * 100 );
    }
}

代码解释 #

1. X轴计数器：新增xCounter变量，每次刷新时递增，到达1000后重置，确保X值始终在0-1000范围内循环。
2. 图表X轴配置：在horizontalLineChartOptions中添加X轴设置，指定类型为linear，并固定Min=0、Max=1000，同时添加轴标题。
3. 流式插件参数：调整ChartStreamingOptions的ScrollMode为Immediate，确保数值轴下的流式动画流畅更新。
4. 数据生成逻辑：将OnHorizontalLineRefreshed中的X值从DateTime.Now替换为xCounter，实现数值型X轴数据的流式生成。

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