ScottPlot5 支持blazor, 內(nèi)置支持縮放和拖地等交互性, 其他交互性暫不支持, 比如選中指定散點, 顯示散點的tooltip.
下面是一個示例,

@page "/"
@using ScottPlot
@using ScottPlot.Blazor

<PageTitle>Home</PageTitle>
<h1>Hello, world!</h1>
Welcome to your new app.
<BlazorPlot @ref=blazorPlot Style="width: 400px; height: 400px;" />

@code{


    //創(chuàng)建一個 BlazorPlot 對象
    BlazorPlot blazorPlot { get; set; } = new();

    protected override void OnAfterRender(bool firstRender)
    {
        if (firstRender)
        {
            // 從 blazorPlot 中獲取  Plot 對象
            var myPlot = blazorPlot.Plot;



            //創(chuàng)建2個boxPlot
            ScottPlot.Box box = new()
            {
                Position = 5,
                BoxMin = 81,
                BoxMax = 93,
                WhiskerMin = 76,
                WhiskerMax = 107,
                BoxMiddle = 84,

            };
            ScottPlot.Box box2 = new()
            {
                Position = 6,
                BoxMin = 81,
                BoxMax = 93,
                WhiskerMin = 76,
                WhiskerMax = 107,
                BoxMiddle = 84,
            };


            //在myPlot增加boxPlot
            myPlot.Add.Box(box);
            myPlot.Add.Box(box2);

            //設(shè)置X label, 可以設(shè)置多行文本            
            myPlot.Axes.Bottom.Label.Text = "time\nline2\nline3";

            //因為X Label為多行, 所以需要設(shè)置padding值, 否則只能顯示出第一行文本, 數(shù)值單位為像素
            var padding =new ScottPlot.PixelPadding(left:100,right:50,bottom:150,top:50);
            myPlot.Layout.Fixed(padding);


            //設(shè)置title
            myPlot.Title("box plot sample");

            //在plot上增加一個 text, 坐標(biāo)單位是X/Y軸刻度單位
            var myText= myPlot.Add.Text("text", 5, 80); 
            myText.Label.Alignment = Alignment.MiddleLeft;
            myText.Label.Bold = true;
            myText.Label.FontSize = 26;
            myText.Label.ForeColor = Colors.Blue;                    

            // 設(shè)置坐標(biāo)軸限制
            myPlot.Axes.SetLimits(0, 10, 70, 110);

            //設(shè)置X軸刻度
            ScottPlot.Tick[] ticks = { 
                new ScottPlot.Tick(0, "T0"), 
                new ScottPlot.Tick(1, "T1"), 
                new ScottPlot.Tick(2, "T2"), 
                new ScottPlot.Tick(3, "T3"), 
                new ScottPlot.Tick(4, "T4"), 
                new ScottPlot.Tick(5, "T5"), 
                new ScottPlot.Tick(6, "T6"), 
                new ScottPlot.Tick(7, "T7"), 
                new ScottPlot.Tick(8, "T8"), 
                new ScottPlot.Tick(9, "T9"), 
                new ScottPlot.Tick(10, "T0"), 
       };
            myPlot.Axes.Bottom.TickGenerator = new ScottPlot.TickGenerators.NumericManual(ticks);

            //或者使用日期刻度
            //myPlot.Axes.DateTimeTicksBottom();

            //使用散點圖來顯示異常點 outliers
            double[] outlierX = { 5, 6 };//X坐標(biāo)對應(yīng) boxplot 的位置, 數(shù)值單位為刻度尺單位
            double[] outlierY = { 109, 108 };//Y坐標(biāo)異常點的數(shù)值, 數(shù)值單位為刻度尺單位
            var scatter=myPlot.Add.Scatter(outlierX, outlierY);
            scatter.MarkerStyle = new MarkerStyle(MarkerShape.FilledCircle, 5f, Colors.Red);
            scatter.LineWidth = 0; //不顯示連接線
           
            // 刷新 BlazorPlot 組件以顯示更新后的圖表
            //blazorPlot.Refresh();

            //myPlot.SavePng() ;
        }
    }


}