LiveCharts é uma biblioteca para desenvolvedores .NET . O LiveCharts ajuda a criar gráficos dinâmicos e visualmente atraentes em aplicações C#. Isso significa que seus gráficos são atualizados automaticamente quando seus dados são alterados. O LiveCharts não se destina apenas a aplicações tradicionais; Ele oferece suporte ao Windows Presentation Foundation (WPF), tornando-se uma ferramenta versátil para aplicativos de desktop.

Principais características e benefícios

Procurando uma solução para suas necessidades de visualização de dados? O LiveCharts oferece uma solução completa com uma ampla gama de recursos. Aqui estão alguns pontos-chave:

• Animações automáticas: Os gráficos são animados automaticamente, atualizando-se suavemente sem a necessidade de código adicional, tornando suas visualizações de dados mais envolventes.
• Suporte a WPF: Você pode usar o LiveCharts em aplicativos WPF, permitindo interfaces de usuário avançadas.
• Alto desempenho: Projetado para melhorar o desempenho, a velocidade e a eficiência, especialmente com grandes conjuntos de dados.
• Flexibilidade: É simples, flexível, interativo e fácil de usar desde o início, mas também permite personalizações complexas adaptadas às necessidades do seu projeto.
• Gráficos interativos: Os usuários podem interagir com os gráficos, aprimorando a exploração de dados.
• Ampla variedade de tipos de gráficos: Quaisquer que sejam suas necessidades de visualização de dados, o LiveCharts tem um tipo de gráfico para isso.

O LiveCharts transforma dados complexos em representações visuais interativas e envolventes. Sua facilidade de uso e flexibilidade fazem dele uma ferramenta poderosa para desenvolvedores. Utilizando os recursos avançados do LiveCharts, os desenvolvedores podem transformar dados complexos em representações visuais interativas e envolventes. Vamos explorar os recursos do LiveCharts e sua integração com a biblioteca IronPDF .

Primeiros passos com o LiveCharts

Configurar seu ambiente de desenvolvimento para usar o LiveCharts é simples, e acessar seu código-fonte facilita a personalização e a compreensão. Esta seção orienta você nos passos iniciais e ajuda você a criar seu primeiro gráfico.

Preparando seu ambiente

Para usar o LiveCharts, certifique-se de ter o Visual Studio instalado. Em seguida, adicione o pacote LiveCharts, um pacote específico desenvolvido para visualização dinâmica de dados, ao seu projeto. Você pode fazer isso através do Gerenciador de Pacotes NuGet . Procure por LiveCharts e instale a versão mais recente. Este processo adiciona todas as referências necessárias ao seu projeto.

Sua primeira parada musical com o LiveCharts

Criar seu primeiro gráfico envolve alguns passos simples. Primeiro, adicione um controle de gráfico à interface do usuário do seu aplicativo. Se você estiver usando WPF, pode fazer isso em XAML ou programaticamente em C#.

Aqui está um exemplo básico em XAML:

<lvc:CartesianChart Series="{Binding MySeries}"/>

<lvc:CartesianChart Series="{Binding MySeries}"/>

No seu código C#, prepare os dados para o seu gráfico. Para um gráfico de linhas básico, você precisará de uma SeriesCollection . Você pode preencher esta coleção com LineSeries , definindo os valores para seus pontos de dados.

public SeriesCollection MySeries { get; set; }

public MainWindow()
{
    InitializeComponent();
    // Initialize the series collection and bind data
    MySeries = new SeriesCollection
    {
        new LineSeries
        {
            Values = new ChartValues<double> { 4, 6, 5, 2, 7 }
        }
    };
    // Bind the data context to this instance
    DataContext = this;
}

public SeriesCollection MySeries { get; set; }

public MainWindow()
{
    InitializeComponent();
    // Initialize the series collection and bind data
    MySeries = new SeriesCollection
    {
        new LineSeries
        {
            Values = new ChartValues<double> { 4, 6, 5, 2, 7 }
        }
    };
    // Bind the data context to this instance
    DataContext = this;
}

Public Property MySeries() As SeriesCollection

'INSTANT VB WARNING: The following constructor is declared outside of its associated class:
'ORIGINAL LINE: public MainWindow()
Public Sub New()
	InitializeComponent()
	' Initialize the series collection and bind data
	MySeries = New SeriesCollection
		From {
			New LineSeries With {
				.Values = New ChartValues(Of Double) From {4, 6, 5, 2, 7}
			}
		}
	' Bind the data context to this instance
	DataContext = Me
End Sub

Public Property MySeries() As SeriesCollection

'INSTANT VB WARNING: The following constructor is declared outside of its associated class:
'ORIGINAL LINE: public MainWindow()
Public Sub New()
	InitializeComponent()
	' Initialize the series collection and bind data
	MySeries = New SeriesCollection
		From {
			New LineSeries With {
				.Values = New ChartValues(Of Double) From {4, 6, 5, 2, 7}
			}
		}
	' Bind the data context to this instance
	DataContext = Me
End Sub

Este trecho de código cria um gráfico de linhas simples. Exibe uma série de valores em um gráfico cartesiano. Lembre-se de definir o DataContext da sua janela ou controle para garantir que o gráfico esteja vinculado aos seus dados.

Seguindo esses passos, você terá um gráfico básico pronto para uso. Isto é apenas o começo. O LiveCharts permite visualizações de dados muito mais complexas e interativas.

Explorando os recursos do LiveCharts

O LiveCharts não se limita a exibir dados estáticos. Seu verdadeiro poder reside na capacidade de atualizar em tempo real, reagir a mudanças nos dados e oferecer uma ampla variedade de tipos de gráficos. Esta seção explora essas funcionalidades, fornecendo exemplos para ajudar você a compreender os conceitos.

Entendendo a vinculação e as atualizações de dados

A vinculação de dados é um conceito fundamental no LiveCharts. Isso permite que seus gráficos reflitam automaticamente as mudanças em seus dados. Essa funcionalidade é especialmente útil para aplicações que lidam com fontes de dados dinâmicas.

Considere um aplicativo que rastreia preços de ações. À medida que novos dados chegam, você deseja que seu gráfico seja atualizado. Com o LiveCharts, basta atualizar a fonte de dados e o gráfico detecta essas alterações e se atualiza de acordo.

Veja como você pode vincular um gráfico a uma fonte de dados:

var myValues = new ChartValues<double> { 3, 4, 6, 3, 2 };
var lineSeries = new LineSeries
{
    Values = myValues
};

// Add the line series to the series collection
mySeries.Add(lineSeries);

// When data changes
myValues.Add(5); // The chart updates automatically

var myValues = new ChartValues<double> { 3, 4, 6, 3, 2 };
var lineSeries = new LineSeries
{
    Values = myValues
};

// Add the line series to the series collection
mySeries.Add(lineSeries);

// When data changes
myValues.Add(5); // The chart updates automatically

Dim myValues = New ChartValues(Of Double) From {3, 4, 6, 3, 2}
Dim lineSeries As New LineSeries With {.Values = myValues}

' Add the line series to the series collection
mySeries.Add(lineSeries)

' When data changes
myValues.Add(5) ' The chart updates automatically

Dim myValues = New ChartValues(Of Double) From {3, 4, 6, 3, 2}
Dim lineSeries As New LineSeries With {.Values = myValues}

' Add the line series to the series collection
mySeries.Add(lineSeries)

' When data changes
myValues.Add(5) ' The chart updates automatically

Explorando os tipos de gráficos

O LiveCharts suporta vários tipos de gráficos, cada um adequado para diferentes tipos de necessidades de visualização de dados. Aqui estão alguns exemplos:

• Série de linhas: Ideal para exibir tendências ao longo do tempo.
• Gráfico de pizza: Ideal para mostrar proporções em um conjunto de dados.
• Gráfico de barras: Útil para comparar quantidades entre diferentes categorias.

Para criar um gráfico de pizza, você usaria a classe PieSeries . Aqui está um exemplo rápido:

public SeriesCollection MyPieSeries { get; set; }

public MainWindow()
{
    InitializeComponent();
    // Initialize the pie series collection and bind data
    MyPieSeries = new SeriesCollection
    {
        new PieSeries
        {
            Values = new ChartValues<double> { 4, 6, 5 },
            Title = "Series 1"
        },
        new PieSeries
        {
            Values = new ChartValues<double> { 7, 8, 6 },
            Title = "Series 2"
        }
    };
    // Bind the data context to this instance
    DataContext = this;
}

public SeriesCollection MyPieSeries { get; set; }

public MainWindow()
{
    InitializeComponent();
    // Initialize the pie series collection and bind data
    MyPieSeries = new SeriesCollection
    {
        new PieSeries
        {
            Values = new ChartValues<double> { 4, 6, 5 },
            Title = "Series 1"
        },
        new PieSeries
        {
            Values = new ChartValues<double> { 7, 8, 6 },
            Title = "Series 2"
        }
    };
    // Bind the data context to this instance
    DataContext = this;
}

Public Property MyPieSeries() As SeriesCollection

'INSTANT VB WARNING: The following constructor is declared outside of its associated class:
'ORIGINAL LINE: public MainWindow()
Public Sub New()
	InitializeComponent()
	' Initialize the pie series collection and bind data
	MyPieSeries = New SeriesCollection
		From {
			New PieSeries With {
				.Values = New ChartValues(Of Double) From {4, 6, 5},
				.Title = "Series 1"
			},
			New PieSeries With {
				.Values = New ChartValues(Of Double) From {7, 8, 6},
				.Title = "Series 2"
			}
		}
	' Bind the data context to this instance
	DataContext = Me
End Sub

Public Property MyPieSeries() As SeriesCollection

'INSTANT VB WARNING: The following constructor is declared outside of its associated class:
'ORIGINAL LINE: public MainWindow()
Public Sub New()
	InitializeComponent()
	' Initialize the pie series collection and bind data
	MyPieSeries = New SeriesCollection
		From {
			New PieSeries With {
				.Values = New ChartValues(Of Double) From {4, 6, 5},
				.Title = "Series 1"
			},
			New PieSeries With {
				.Values = New ChartValues(Of Double) From {7, 8, 6},
				.Title = "Series 2"
			}
		}
	' Bind the data context to this instance
	DataContext = Me
End Sub

Este trecho de código configura um gráfico de pizza básico com duas séries de dados. Assim como no exemplo do gráfico de linhas, ele vincula a PieSeries à propriedade Values .

O LiveCharts também oferece flexibilidade e controle sobre a aparência e o comportamento dos seus gráficos. Você pode personalizar praticamente todos os aspectos, desde cores e rótulos até animações e interatividade. Isso permite personalizar seus gráficos para que se adaptem perfeitamente à aparência e ao funcionamento do seu aplicativo.

Introdução ao IronPDF

A integração do LiveCharts com o IronPDF preenche a lacuna entre a visualização dinâmica de dados e a geração de relatórios estáticos. IronPDF é uma biblioteca poderosa para C# que permite aos desenvolvedores criar, manipular e converter documentos PDF programaticamente.

A combinação com o LiveCharts permite a criação de relatórios em PDF contendo seus gráficos interativos. Esta seção apresenta o IronPDF e orienta você sobre como configurá-lo em seu projeto.

Por que o IronPDF?

Os recursos de conversão de HTML para PDF do IronPDF se destacam onde outras bibliotecas de PDF falham, especialmente em sua capacidade de renderizar HTML para PDF. Essa funcionalidade é particularmente útil ao trabalhar com o LiveCharts, pois permite renderizar os gráficos em telas HTML e, em seguida, converter essas telas em documentos PDF. O IronPDF oferece suporte completo a CSS3, JavaScript e HTML5, garantindo que seus gráficos sejam exibidos conforme o esperado na saída em PDF.

LiveCharts com IronPDF

Segue um exemplo de código detalhado que ilustra o processo de criação de um gráfico com o LiveCharts, sua exportação e, em seguida, o uso do IronPDF para gerar um relatório em PDF que inclui esse gráfico. Este exemplo pressupõe que você tenha um conhecimento básico de como trabalhar com LiveCharts e IronPDF.

Primeiro, certifique-se de ter os pacotes LiveCharts e IronPDF instalados em seu projeto via NuGet.

Passo 1: Gere o gráfico com o LiveCharts

Vamos começar criando um gráfico de linhas simples usando o LiveCharts. Para simplificar, este exemplo se concentrará em gerar o gráfico e salvá-lo como uma imagem, que será posteriormente incluída em nosso PDF.

private void GenerateChartButton_Click(object sender, RoutedEventArgs e)
{
    CreateAndSaveChartImage();
}

public void CreateAndSaveChartImage()
{
    // Create the series collection for the chart
    var seriesCollection = new SeriesCollection
    {
        new LineSeries
        {
            Values = new ChartValues<double> { 4, 6, 5, 2, 7 },
            Title = "Sample Series"
            // You can set other properties like color, point geometry, etc.
        }
    };

    // Initialize the CartesianChart
    var chart = new CartesianChart
    {
        Series = seriesCollection,
        Width = 400,
        Height = 300,
        Background = Brushes.White
    };

    // Add chart to the UI
    ChartContainer.Child = chart;
    
    // Force the chart to update
    chart.Update(true, true);
    
    // Save the rendered chart as an image
    SaveChartToImage(chart);
}

private void SaveChartToImage(CartesianChart chart)
{
    // Measure and arrange the chart to ensure correct layout
    chart.Measure(new Size(chart.Width, chart.Height));
    chart.Arrange(new Rect(0, 0, chart.Width, chart.Height));

    // Create a render target bitmap and render the chart on it
    var renderTargetBitmap = new RenderTargetBitmap(
        (int)chart.ActualWidth, (int)chart.ActualHeight, 
        96, 96, PixelFormats.Pbgra32);

    renderTargetBitmap.Render(chart);

    // Encode the rendered image to a PNG format
    var encoder = new PngBitmapEncoder();
    encoder.Frames.Add(BitmapFrame.Create(renderTargetBitmap));

    // Define the path where the chart will be saved
    string path = "chart.png";

    // Save the encoded PNG to the file system
    using (var stream = File.Create(path))
    {
        encoder.Save(stream);
    }

    // Inform the user of the successful save
    MessageBox.Show($"Chart saved as {path}");
}

private void GenerateChartButton_Click(object sender, RoutedEventArgs e)
{
    CreateAndSaveChartImage();
}

public void CreateAndSaveChartImage()
{
    // Create the series collection for the chart
    var seriesCollection = new SeriesCollection
    {
        new LineSeries
        {
            Values = new ChartValues<double> { 4, 6, 5, 2, 7 },
            Title = "Sample Series"
            // You can set other properties like color, point geometry, etc.
        }
    };

    // Initialize the CartesianChart
    var chart = new CartesianChart
    {
        Series = seriesCollection,
        Width = 400,
        Height = 300,
        Background = Brushes.White
    };

    // Add chart to the UI
    ChartContainer.Child = chart;
    
    // Force the chart to update
    chart.Update(true, true);
    
    // Save the rendered chart as an image
    SaveChartToImage(chart);
}

private void SaveChartToImage(CartesianChart chart)
{
    // Measure and arrange the chart to ensure correct layout
    chart.Measure(new Size(chart.Width, chart.Height));
    chart.Arrange(new Rect(0, 0, chart.Width, chart.Height));

    // Create a render target bitmap and render the chart on it
    var renderTargetBitmap = new RenderTargetBitmap(
        (int)chart.ActualWidth, (int)chart.ActualHeight, 
        96, 96, PixelFormats.Pbgra32);

    renderTargetBitmap.Render(chart);

    // Encode the rendered image to a PNG format
    var encoder = new PngBitmapEncoder();
    encoder.Frames.Add(BitmapFrame.Create(renderTargetBitmap));

    // Define the path where the chart will be saved
    string path = "chart.png";

    // Save the encoded PNG to the file system
    using (var stream = File.Create(path))
    {
        encoder.Save(stream);
    }

    // Inform the user of the successful save
    MessageBox.Show($"Chart saved as {path}");
}

Private Sub GenerateChartButton_Click(sender As Object, e As RoutedEventArgs)
    CreateAndSaveChartImage()
End Sub

Public Sub CreateAndSaveChartImage()
    ' Create the series collection for the chart
    Dim seriesCollection = New SeriesCollection From {
        New LineSeries With {
            .Values = New ChartValues(Of Double) From {4, 6, 5, 2, 7},
            .Title = "Sample Series"
            ' You can set other properties like color, point geometry, etc.
        }
    }

    ' Initialize the CartesianChart
    Dim chart = New CartesianChart With {
        .Series = seriesCollection,
        .Width = 400,
        .Height = 300,
        .Background = Brushes.White
    }

    ' Add chart to the UI
    ChartContainer.Child = chart

    ' Force the chart to update
    chart.Update(True, True)

    ' Save the rendered chart as an image
    SaveChartToImage(chart)
End Sub

Private Sub SaveChartToImage(chart As CartesianChart)
    ' Measure and arrange the chart to ensure correct layout
    chart.Measure(New Size(chart.Width, chart.Height))
    chart.Arrange(New Rect(0, 0, chart.Width, chart.Height))

    ' Create a render target bitmap and render the chart on it
    Dim renderTargetBitmap = New RenderTargetBitmap(CInt(chart.ActualWidth), CInt(chart.ActualHeight), 96, 96, PixelFormats.Pbgra32)

    renderTargetBitmap.Render(chart)

    ' Encode the rendered image to a PNG format
    Dim encoder = New PngBitmapEncoder()
    encoder.Frames.Add(BitmapFrame.Create(renderTargetBitmap))

    ' Define the path where the chart will be saved
    Dim path As String = "chart.png"

    ' Save the encoded PNG to the file system
    Using stream = File.Create(path)
        encoder.Save(stream)
    End Using

    ' Inform the user of the successful save
    MessageBox.Show($"Chart saved as {path}")
End Sub

Private Sub GenerateChartButton_Click(sender As Object, e As RoutedEventArgs)
    CreateAndSaveChartImage()
End Sub

Public Sub CreateAndSaveChartImage()
    ' Create the series collection for the chart
    Dim seriesCollection = New SeriesCollection From {
        New LineSeries With {
            .Values = New ChartValues(Of Double) From {4, 6, 5, 2, 7},
            .Title = "Sample Series"
            ' You can set other properties like color, point geometry, etc.
        }
    }

    ' Initialize the CartesianChart
    Dim chart = New CartesianChart With {
        .Series = seriesCollection,
        .Width = 400,
        .Height = 300,
        .Background = Brushes.White
    }

    ' Add chart to the UI
    ChartContainer.Child = chart

    ' Force the chart to update
    chart.Update(True, True)

    ' Save the rendered chart as an image
    SaveChartToImage(chart)
End Sub

Private Sub SaveChartToImage(chart As CartesianChart)
    ' Measure and arrange the chart to ensure correct layout
    chart.Measure(New Size(chart.Width, chart.Height))
    chart.Arrange(New Rect(0, 0, chart.Width, chart.Height))

    ' Create a render target bitmap and render the chart on it
    Dim renderTargetBitmap = New RenderTargetBitmap(CInt(chart.ActualWidth), CInt(chart.ActualHeight), 96, 96, PixelFormats.Pbgra32)

    renderTargetBitmap.Render(chart)

    ' Encode the rendered image to a PNG format
    Dim encoder = New PngBitmapEncoder()
    encoder.Frames.Add(BitmapFrame.Create(renderTargetBitmap))

    ' Define the path where the chart will be saved
    Dim path As String = "chart.png"

    ' Save the encoded PNG to the file system
    Using stream = File.Create(path)
        encoder.Save(stream)
    End Using

    ' Inform the user of the successful save
    MessageBox.Show($"Chart saved as {path}")
End Sub

Etapa 2: Crie um modelo HTML e insira o gráfico.

Agora, vamos preparar nosso conteúdo HTML, incorporando o gráfico que acabamos de salvar como uma imagem.

string htmlContent = @"
<html>
<body>
    <h1>Chart Report</h1>
    <img src='chart.png' alt='Chart'>
    <p>This is a report generated by combining LiveCharts and IronPDF.</p>
</body>
</html>";

string htmlContent = @"
<html>
<body>
    <h1>Chart Report</h1>
    <img src='chart.png' alt='Chart'>
    <p>This is a report generated by combining LiveCharts and IronPDF.</p>
</body>
</html>";

Passo 3: Converter HTML para PDF com o IronPDF

Por fim, usaremos o IronPDF para converter nosso conteúdo HTML, incluindo a imagem do gráfico incorporada, em um documento PDF.

using IronPdf;

public void CreatePdfReport(string htmlContent)
{
    // Initialize the HTML to PDF converter
    var renderer = new ChromePdfRenderer();
    
    // Render the HTML content as a PDF
    var pdf = renderer.RenderHtmlAsPdf(htmlContent);
    
    // Save the rendered PDF to the file system
    pdf.SaveAs("Report.pdf");
}

using IronPdf;

public void CreatePdfReport(string htmlContent)
{
    // Initialize the HTML to PDF converter
    var renderer = new ChromePdfRenderer();
    
    // Render the HTML content as a PDF
    var pdf = renderer.RenderHtmlAsPdf(htmlContent);
    
    // Save the rendered PDF to the file system
    pdf.SaveAs("Report.pdf");
}

Imports IronPdf

Public Sub CreatePdfReport(htmlContent As String)
    ' Initialize the HTML to PDF converter
    Dim renderer As New ChromePdfRenderer()

    ' Render the HTML content as a PDF
    Dim pdf = renderer.RenderHtmlAsPdf(htmlContent)

    ' Save the rendered PDF to the file system
    pdf.SaveAs("Report.pdf")
End Sub

Imports IronPdf

Public Sub CreatePdfReport(htmlContent As String)
    ' Initialize the HTML to PDF converter
    Dim renderer As New ChromePdfRenderer()

    ' Render the HTML content as a PDF
    Dim pdf = renderer.RenderHtmlAsPdf(htmlContent)

    ' Save the rendered PDF to the file system
    pdf.SaveAs("Report.pdf")
End Sub

Certifique-se de substituir "chart.png" na string htmlContent pelo caminho correto para a imagem do seu gráfico, caso ela não esteja no mesmo diretório que o executável do seu aplicativo.

Este exemplo aborda um cenário básico para ilustrar o processo. Dependendo das suas necessidades específicas, você pode precisar ajustar o código, especialmente em relação à forma como você lida com as imagens e as obtém para seus gráficos.

Técnicas e dicas avançadas

Para melhorar ainda mais a integração:

• Otimize o desempenho: Para conjuntos de dados grandes ou gráficos complexos, considere otimizar o desempenho do LiveCharts e do IronPDF para garantir tempos de carregamento rápidos e operação fluida.
• PDFs interativos: Embora os PDFs sejam estáticos, adicionar hiperlinks ou marcadores pode melhorar a navegação, tornando os relatórios mais fáceis de usar.
• Estilização personalizada: Utilize CSS em seus modelos HTML para garantir que os relatórios estejam de acordo com a identidade visual ou as diretrizes de design da sua empresa.

Conclusão

Em resumo, a integração do LiveCharts com o IronPDF oferece uma combinação poderosa para desenvolvedores .NET que desejam criar gráficos dinâmicos e visualmente atraentes e incorporá-los a relatórios em PDF com estilo profissional. Essa sinergia não apenas aprimora a apresentação dos dados, mas também amplia a utilidade dos aplicativos, facilitando a geração de relatórios estáticos a partir de conjuntos de dados dinâmicos.

A capacidade do IronPDF de renderizar HTML para PDF, com suporte completo para CSS3, JavaScript e HTML5, garante que seus gráficos sejam exibidos perfeitamente na tela e impressos. Para aqueles interessados em explorar essa funcionalidade, IronPDF oferece uma avaliação gratuita do IronPDF a partir de $999, proporcionando uma solução econômica para geração de relatórios de alta qualidade em aplicações .NET.