如何在 Blazor .Net6/8 页面中使用 SciChart/JS

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

在与 NRTDP/SciChartBlazor 斗争之后，我尝试了SciChart/JS 与 blazor - 它工作正常，而且很简单。

我的建议是不要依赖（在本例中）上次更新于 2 年前（截至目前）的 NuGet。

我尝试为 SciChartBlazor 做出贡献，在看到它的内部结构之后 - 它不涵盖 SciChart API，无论如何你都需要/最终添加 JS 来支持你所需要的。

所以，这是如何... 使用 blazor-server-app 获取 SciChart/JS。

asp.net-core blazor blazor-server-side .net-8.0 scichart.js
1个回答
0
投票

使用 blazor-server-app 获取 SciChart/JS。

  • 截至撰写之日可与 .Net6+8 配合使用。

Pages_Layout.cshtml

<head>
...
    
    <!-- Reference the latest version is not recommended for production! -->
    @* <script src="https://cdn.jsdelivr.net/npm/scichart/index.min.js" crossorigin="anonymous"></script> *@
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/index.min.js" crossorigin="anonymous"></script>

    <script src="~/MySciChartGraphsApi.js"></script>

    <component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />
</head>

Pages\MyPage.razor

<div class="GTGraph" id="scichart-root" style="visibility: @graphVisibility"></div>

wwwroot\MySciChartGraphsApi.js

function helloSciChart() {
    return "SciChart-world";
}


// Create a SciChartSurface in the div 'scichart-root'
async function initSciChart() {
    // based on: 
    // * https://www.scichart.com/getting-started/scichart-javascript/
    // ** https://codepen.io/scichart/pen/eYPXazY

    const {
        SciChartSurface,
        NumericAxis,
        FastLineRenderableSeries,
        XyDataSeries,
        EllipsePointMarker,
        SweepAnimation,
        SciChartJsNavyTheme,
        NumberRange,
        MouseWheelZoomModifier,
        ZoomPanModifier,
        ZoomExtentsModifier
    } = SciChart;

    // Tell SciChart where to get webassembly files from.
    SciChartSurface.useWasmFromCDN();

    // Initialize SciChartSurface. Don't forget to await!
    const { sciChartSurface, wasmContext } = await SciChartSurface.create("scichart-root", {
        theme: new SciChartJsNavyTheme(),
        title: "SciChart.js First Chart",
        titleStyle: { fontSize: 22 }
    });

    // Create an XAxis and YAxis with growBy padding
    const growBy = new NumberRange(0.1, 0.1);
    sciChartSurface.xAxes.add(new NumericAxis(wasmContext, { axisTitle: "X Axis", growBy }));
    sciChartSurface.yAxes.add(new NumericAxis(wasmContext, { axisTitle: "Y Axis", growBy }));

    // Create a line series with some initial data
    sciChartSurface.renderableSeries.add(new FastLineRenderableSeries(wasmContext, {
        stroke: "steelblue",
        strokeThickness: 3,
        dataSeries: new XyDataSeries(wasmContext, {
            xValues: [0,1,2,3,4,5,6,7,8,9],
            yValues: [0, 0.0998, 0.1986, 0.2955, 0.3894, 0.4794, 0.5646, 0.6442, 0.7173, 0.7833]
        }),
        pointMarker: new EllipsePointMarker(wasmContext, { width: 11, height: 11, fill: "#fff" }),
        animation: new SweepAnimation({ duration: 300, fadeEffect: true })
    }));
  
    // Add some interaction modifiers to show zooming and panning
    sciChartSurface.chartModifiers.add(new MouseWheelZoomModifier(), new ZoomPanModifier(), new ZoomExtentsModifier());

    return "done";
};

CSS 文件

.MyGraph { height: 400px; }

您的页面.razor / HTML

<div id="scichart-root" class="MyGraph"></div>

您的页面.razor.cs

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        try
        {
            // string result2 = await JSRuntime.InvokeAsync<string>("helloSciChart");  // checking JS works
            string result3 = await JSRuntime.InvokeAsync<string>("initSciChart");

        }
        catch (Exception exception)
        {
            Logger.LogError("exception: {exception}", exception);
        }
    }

    await base.OnAfterRenderAsync(firstRender);
}

预期结果。

使用 SciChart/JS 的奖励

  • 您可以复制粘贴 SciChart 示例，它们会立即生效。
  • 不依赖其他
  • 如果 SciChart 发布新的 API 功能，您可以立即在您的应用程序中使用它们。

HTH.

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.