我在我的Blazor应用程序中使用了chart.js和JSInterop,当数据集中有新数据时，我如何更新我的图表？

uxhixvfz 于 2023-08-05 发布在 Chart.js

关注(0)|答案(1)|浏览(198)

我有一个Blazor服务器应用程序，在那里我使用了chart.js库来使用JSInterop绘制图表。在折线图中，我显示了20个测量值。当所有20个值都存在时，图表工作正常，我打开图表。该图表绘制了20个值的曲线。
但我想把那张图表用做现场图表。这意味着当每一秒都有一个新的数据值进入数据数组时，我就想更新图表。这怎么可能？
下面是我的代码：
我的剃刀页在图表的地方

@page "/wmi_performance2"
@inject TagService TagService
@using System.IO
@inject IJSRuntime JSRuntime
<Chart Id="bar1" Type="@Chart.ChartType.Bar"
   Data="@CPU_Load_array"
   
   Labels="@Measuring_points_array">
</Chart>

字符串
共享/组件文件夹中的MyChart.razor

@using System.IO
@inject IJSRuntime JSRuntime
@using Microsoft.JSInterop;
@inject IJSRuntime jsInvoker

<canvas id="@Id"></canvas>
@code {
public enum ChartType    
    {
        Pie,
        Bar
    }
    [Parameter]
    public string Id { get; set; }
    [Parameter]
    public ChartType Type { get; set; }
    [Parameter]
    public string[] Data { get; set; }
    [Parameter]
    public string[] BackgroundColor { get; set; }
    [Parameter]
    public string[] Labels { get; set; }
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        // Here we create an anonymous type with all the options
        // that need to be sent to Chart.js
        
        try{

        var config = new
        {
            Type = Type.ToString().ToLower(),
            Options = new
            {
                Responsive = true,
                Scales = new
                {
                    YAxes = new[]
                {
                    new { Ticks = new {
                        BeginAtZero=true
                    } }
            }
                }
            },
            Data = new
            {
                Datasets = new[]
            {
                new { Data = Data, BackgroundColor = BackgroundColor}
        },
                Labels = Labels
            }
        };

        await JSRuntime.InvokeVoidAsync("setup", Id, config);
        
        }

        catch(Exception e)
        {
        using (StreamWriter sw = File.AppendText((Pages.CommonClass.error_path)))
        {
            sw.WriteLine("Chart.JS Error: " + e + Environment.NewLine);
        }
        }
        
        
    }
}

型
我的chart.js在wwwroot下

window.setup = (id, config) => {
var ctx = document.getElementById(id).getContext('2d');
new Chart(ctx, config);
}

型

chart.js

来源：https://stackoverflow.com/questions/74232991/i-am-using-chart-js-in-my-blazor-app-with-jsinterop-how-can-i-update-my-chart-w

1条答案

按热度按时间

pes8fvy91#

通常，您使用JSUruntime的InvokeAsnyc或InvokeVoidAsync方法作为所有其他JS互操作调用。这里有一个简单的例子。
JavaScript部分：

window.setupChart = (id, config) => {
    var ctx = document.getElementById(id).getContext('2d');
    new Chart(ctx, config);
}

字符串
Blazor C#部分：

[Inject]
public IJSRuntime JSRunTime { get; set; }
public string id = "chartCanvas";  // ID for canvas: <canvas id="@Id"></canvas>

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        var config = new
        {
            Type = "line",
            Options = new { ... },
            Data = new { ... }
        }
        await JSRuntime.InvokeVoidAsync("setupChart", id, config);
    }
}

型
它工作得很好，但您无法更新图表或无法向其中添加任何内容。
在Blazor中的解决方案是IJSObjectReference。这正是这个功能的作用。
您需要将前面的代码更改为以下内容：
JavaScript部分：

window.setupChart = (id, config) => {
    var ctx = document.getElementById(id).getContext('2d');
    return new Chart(ctx, config);
},
window.updateChart = (chartRef, visible) => {
    // Example: make visible/hidden the 4th dataset in the chart
    chartRef.data.datasets[3].hidden = visible;
    chartRef.update();
}

型
Blazor C#部分：

[Inject]
public IJSRuntime JSRunTime { get; set; }
private IJSObjectReference? chartInstance;
public string id = "chartCanvas";

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        var config = new
        {
            Type = "line",
            Options = new { ... },
            Data = new { ... }
        }
        chartInstance = await JSRuntime.InvokeAsync<IJSObjectReference>("setupChart", id, config);
    }
}
public async Task UpdateChart()
{
    await JSRuntime.InvokeVoidAsync("updateChart", chartInstance, false);
}

型
就这样，你可以更新你现有的图表。
别忘了在你的razor组件中实现@implements IAsyncDisposable，并处理它：

async ValueTask IAsyncDisposable.DisposeAsync()
{
    if (chartInstance is not null)
    {
        await chartInstance.DisposeAsync();
    }
}

型

赞(0）回复(0）举报 2023-08-05

我来回答

我在我的Blazor应用程序中使用了chart.js和JSInterop,当数据集中有新数据时，我如何更新我的图表？

1条答案

相关问题

热门标签

最新问答