Livecharts C# (Como funciona para desenvolvedores)

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.

Seu primeiro gráfico 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

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.

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

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

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.

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}");
}

Imports System

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

Public Sub CreateAndSaveChartImage()
	' Create the series collection for the chart
	Dim seriesCollection As New SeriesCollection
		From {
			New LineSeries With {
				.Values = New ChartValues(Of Double) From {4, 6, 5, 2, 7},
				.Title = "Sample Series"
			}
		}

	' 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(ByVal 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 As New RenderTargetBitmap(CInt(Math.Truncate(chart.ActualWidth)), CInt(Math.Truncate(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>";

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(ByVal htmlContent As String)
	' Initialize the HTML to PDF converter
	Dim renderer = 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.