024. Chart

이번엔 Chart를 써보자......

 

 

일반적인 Line Chart...

 

나는 지금까지 Chart는 Infragistics의 Chart만 써보았지만.... 이게 참...애매한거같아서....

 

그냥 무료 Chart를 한번 써보도록해보자...

 

일단.. Chart를 쓰려면... 기본 프로젝트 생성 후에.........

 

 

NuGet에서 Livechart를 검색해서 설치해주자..!!

 

NuGet은 아래와 같이 Project 에서 우클릭해서 NuGet 패키지 관리를 누르면 나온다.

 

 

설치가 완료되면 준비단계는 끝..!!

 

xaml에서 아래와 같이 입력해주자.

 

 

<Window x:Class="TestProject.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:lvc="clr-namespace:LiveCharts.Wpf;assembly=LiveCharts.Wpf"
        xmlns:local="clr-namespace:TestProject"
        mc:Ignorable="d"
        Title="MainWindow" Height="217.5" Width="332">
    <Grid>
        <lvc:CartesianChart>
            <lvc:CartesianChart.Series>
                <lvc:LineSeries Values="{Binding Values}" FlowDirection="LeftToRight"/>
            </lvc:CartesianChart.Series>
        </lvc:CartesianChart>
    </Grid>
</Window>
 

 

이러면 기본 Grid에 Line Chart를 생성해주는 것이다.

 

code behind는

 

using System;
using System.Collections;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Diagnostics;
using System.IO;
using System.Linq;
using System.Runtime.Remoting.Contexts;
using System.Text;
using System.Threading;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Markup;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
 
using LiveCharts;
using LiveCharts.Defaults;
 
namespace TestProject
{
    /// <summary>
    /// MainWindow.xaml에 대한 상호 작용 논리
    /// </summary>    
    public partial class MainWindow : Window
    {
        public ChartValues<float> Values { get; set; }
 
        private readonly Random _r = new Random();
        private readonly int _delay = 1000;
 
        Queue DataQ = new Queue();
 
        public MainWindow()
        {
            InitializeComponent();
 
            DataContext = this;
 
            Values = new ChartValues<float>();
 
            Sync = new object();
 
            Task.Run(InputData);
 
            Task.Run(ReadData);
        }
 
        public object Sync { get; }
 
 
        private async Task InputData()
        {
            while (true)
            {
                await Task.Delay(500);
 
                lock (Sync)
                {
                    DataQ.Enqueue((float)_r.Next(0, 100));
                }
            }
        }
 
        private async Task ReadData()
        {
            await Task.Delay(1000);
 
            while (true)
            {
                await Task.Delay(_delay);
                lock (Sync)
                {
                    if (DataQ.Count > 0)
                    {
                        Values.Add((float)DataQ.Dequeue());
                    }
                }
            }
        }
    }
}
 

 

코드가 아주 조금 길긴하지만.. 뭐 없다.

 

Task를 2개 만들어주고 1개의 Task는 데이터를 계속 입력. 1개의 Task는 데이터를 계속 출력

 

출력한놈에서는 Values라는 바인딩된 데이터에 값을 넣어줌으로써 그래프가 계속 그려지도록....!!

 

이렇게 해주면

 

 

이렇게 랜덤데이터들이 표출된다..!!

 

챠트에 대한 옵션들은 이렇게 기본적인 라인챠트도 있고

 

Bar, Step, Stack, Pie, Scatter, Financial, Heat 등 여러가지가 있다.

 

거기에 맞추어 Series를 만들고 진행하면 크게 어려움을 없을 것으로 판단된다..

 

그리하여 자세한 샘플은 없음...

 

기본적인 Storke 색상 변경등도 어렵지않게 수정할 수 있을 거기에....

 

내 예제처럼 Thread를 통해서 데이터를 넣고 표출하고를 수행한다면 추후는 커스터마이징이라고 생각함....

 

해보다가 모르겠으면 물어보세요..!!

 

예제파일은 요기

TestProject.zip

2.15MB

 

아 그리고 더 자세한 LiveChart의 정보를 얻으려면 여기로..!

(https://github.com/beto-rodriguez/LiveCharts2)