Livecharts C# (Cómo Funciona para Desarrolladores)

Cómo configurar el entorno

Para usar LiveCharts, asegúrese de tener Visual Studio instalado. Luego, añada el paquete LiveCharts al proyecto a través del Administrador de Paquetes NuGet. Busque LiveCharts e instale la última versión. Este proceso añade todas las referencias necesarias al proyecto.

Su primer gráfico con LiveCharts

Crear el primer gráfico implica unos pocos pasos simples. Añada un control de gráfico a la UI de la aplicación. Si se usa WPF, esto puede hacerse en XAML o programáticamente en C#.

Aquí hay un ejemplo básico en XAML:

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

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

En el código C#, prepare los datos para el gráfico. Para un gráfico de línea básico, se necesita una SeriesCollection. Esta colección puede poblarse con LineSeries, estableciendo las Values en los puntos de datos.

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 fragmento de código crea un gráfico de línea simple. Muestra una serie de valores en un gráfico cartesiano. Recuerde establecer el DataContext de la ventana o control para asegurar que el gráfico se vincule a los datos.

Siguiendo estos pasos, tendrás un gráfico básico funcionando. Esto es solo el comienzo. LiveCharts permite visualizaciones de datos mucho más complejas e interactivas.

Entender la vinculación de datos y las actualizaciones

La vinculación de datos es un concepto central en LiveCharts. Permite que tus gráficos reflejen automáticamente los cambios en tus datos. Esta característica es especialmente útil para aplicaciones que manejan fuentes de datos dinámicos.

Considere una aplicación que rastrea precios de acciones. A medida que llegan nuevos datos, el gráfico se actualiza automáticamente. Con LiveCharts, basta con actualizar la fuente de datos y el gráfico detecta estos cambios y se actualiza en consecuencia.

Aquí está cómo puedes vincular un gráfico a una fuente de datos:

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

Buceando en los tipos de gráficos

LiveCharts soporta varios tipos de gráficos, cada uno adecuado para diferentes necesidades de visualización de datos. Aquí hay algunos ejemplos:

• Serie de líneas: Ideal para mostrar tendencias a lo largo del tiempo.
• Gráfico circular: ideal para mostrar proporciones en un conjunto de datos.
• Gráfico de barras: útil para comparar cantidades entre diferentes categorías.

Para crear un gráfico de pastel, utilizarías la clase PieSeries. Aquí hay un ejemplo 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 fragmento de código configura un gráfico de pastel básico con dos series de datos. Al igual que el ejemplo de gráfico de líneas, vincula la PieSeries a la propiedad Values.

LiveCharts también ofrece flexibilidad y control sobre la apariencia y el comportamiento de los gráficos. Es posible personalizar casi todos los aspectos, desde colores y etiquetas hasta animaciones e interactividad. Esto permite adaptar los gráficos para que se ajusten perfectamente al aspecto y la sensación de la aplicación.

¿Por qué IronPDF?

Las Capacidades de Conversión de HTML a PDF de IronPDF destacan donde otras bibliotecas PDF fallan, especialmente en su capacidad para renderizar HTML a PDF. Esta característica es particularmente útil cuando se trabaja con LiveCharts, ya que puedes renderizar tus gráficos a lienzos HTML y luego convertir estos lienzos en documentos PDF. IronPDF admite CSS3 completo, JavaScript y HTML5, asegurando que tus gráficos se vean como se pretende en la salida PDF.

LiveCharts con IronPDF

Aquí hay un ejemplo de código detallado que ilustra el proceso de crear un gráfico con LiveCharts, exportarlo y luego usar IronPDF para generar un informe PDF que incluya este gráfico. Este ejemplo asume que tienes un entendimiento básico sobre cómo trabajar con LiveCharts e IronPDF.

Primero, asegúrate de tener los paquetes LiveCharts e IronPDF instalados en tu proyecto a través de NuGet.

Paso 1: Generar el gráfico con LiveCharts

Comencemos creando un gráfico de líneas simple usando LiveCharts. Para simplificar, este ejemplo se centrará en generar el gráfico y guardarlo como una imagen, que luego se incluirá en nuestro 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

Paso 2: Crear una plantilla HTML e insertar el gráfico

Ahora, prepararemos nuestro contenido HTML, incrustando el gráfico que acabamos de guardar como una imagen.

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

Paso 3: Convertir HTML a PDF con IronPDF

Finalmente, usaremos IronPDF para convertir nuestro contenido HTML, incluyendo la imagen del gráfico incrustada, en un 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

Asegúrese de reemplazar "chart.png" en la cadena htmlContent con la ruta correcta a la imagen del gráfico si no se encuentra en el mismo directorio que el ejecutable de la aplicación.

Este ejemplo cubre un escenario básico para ilustrar el proceso. Dependiendo de los requisitos específicos, es posible que sea necesario ajustar el código, especialmente en lo relacionado con cómo se manejan y obtienen las imágenes para los gráficos.

Técnicas avanzadas y consejos

Para mejorar aún más la integración:

• Optimizar el rendimiento: para conjuntos de datos grandes o gráficos complejos, considere optimizar el rendimiento de LiveCharts e IronPDF para garantizar tiempos de carga rápidos y un funcionamiento fluido.
• PDF interactivos: aunque los PDF son estáticos, agregar hipervínculos o marcadores puede mejorar la navegación, haciendo que los informes sean más fáciles de usar.
• Estilo personalizado: use CSS dentro de sus plantillas HTML para garantizar que los informes coincidan con la marca corporativa o las pautas de diseño.