Blazor コントロール
チャートの画像へのエクスポート
コントロール > FlexChart > チャートの画像へのエクスポート

Blazor FlexChart allows you to export the chart to multiple image formats. The supported formats are PNG, JPEG, and SVG.

You can use the SaveImage method to export a FlexChart to an image format. The SaveImage method takes parameter for image format and saves the chart as an image using the specified format using the ImageFormat enumeration. This enumeration allows you to export the chart to PNG, JPEG, or SVG format.

The following code shows the implementation of exporting a FlexChart to an image (with PNG format) on a button click.

Index.razor
コードのコピー
@using C1.Blazor.Core
@using C1.Chart;
@using C1.Blazor.Chart;
@using C1.Blazor.Input;

<FlexChart @ref="chart" Class="chart" ChartType="ChartType.Scatter" 
        HeaderContent="Phase II Test Results" HeaderStyle="font-size:24px"
        BindingX="X" Binding="Y">
      <SeriesCollection>
        <Series Name="実験 1" ItemsSource="Data1" />
        <Series Name="実験 2" ItemsSource="Data2" />
        <Series Name="実験 3" ItemsSource="Data3" />
    </SeriesCollection>
</FlexChart>

    <Title>画像へのエクスポート</Title>
    <Settings>Save as:
        <button @onclick="SavePng">PNG</button>
    </Settings>

@code {
    FlexChart chart;

    List<C1Point> Data1 { get; set; }
    List<C1Point> Data2 { get; set; }
    List<C1Point> Data3 { get; set; }

    protected override void OnInitialized()
    {
        Data1 = DataSource.GetData(50,0,3);
        Data2 = DataSource.GetData(40,100,12);
        Data3 = DataSource.GetData(30,-100,24);
    }

    void SavePng()
    {
        chart.SaveImage("chart", ImageFormat.Png);
    }

    public class DataSource
    {
        private static Random rnd = new Random();

        public static List<C1Point> GetData(int cnt, double a, double b)
        {
            var data = new List<C1Point>();

            var  x = -2.5 * cnt;
            for (var i = 0; i < cnt; i++)
            {
                var val = rnd.NextDouble() * cnt - cnt / 2;
        
                data.Add(new C1Point( x, a + x * (b + val) + val));
                x += .5 + rnd.NextDouble() * 10;
            }
            return data;
        }
    }
}