WPF優秀圖表組件推薦之LiveCharts

概述

LiveCharts是一個比較漂亮的WPF圖表控件，在數據變化時還會有動畫切換的效果，並且樣式也可以控制。

 

官方網站：Live Charts (lvcharts.net)

開源代碼：GitHub - Live-Charts/Live-Charts: Simple, flexible, interactive & powerful charts, maps and gauges for .Net

 

本文代碼基於Stylet開發，如果您還不了解Stylet，請參閱：

WPF優秀組件推薦之Stylet（一） - seabluescn - 博客園 (cnblogs.com)

WPF優秀組件推薦之Stylet（二） - seabluescn - 博客園 (cnblogs.com)

 

環境安裝

通過Nuget引用下面兩個組件；

  

基本使用

本文介紹一個常用的折線圖的控件，其它控件請查看官方代碼。

Xaml:

                <lvc:CartesianChart >
                    <lvc:CartesianChart.Series>
                        <lvc:LineSeries Title="Voltage" Values="{Binding VoltageLineSeries}" />
                        <lvc:LineSeries Title="Current"  Values="{Binding CurrentLineSeries}"  />                       
                    </lvc:CartesianChart.Series>

                    <!--定義Y軸-->
                    <lvc:CartesianChart.AxisY>                       
                        <lvc:Axis Title="Voltage/Current"></lvc:Axis>
                    </lvc:CartesianChart.AxisY>

                    <!--定義X軸-->
                    <lvc:CartesianChart.AxisX>                      
                        <lvc:Axis Title="Samples" Labels="{Binding XTimeLabels}"/>
                    </lvc:CartesianChart.AxisX>
                </lvc:CartesianChart>

 Code:

        #region LiveCharts

        public string[] XTimeLabels { get; set; } = new string[] { "0" };
        public ChartValues<double> VoltageLineSeries { get; set; }
        public ChartValues<double> CurrentLineSeries { get; set; }

        public void ReflashDatas()
        {
            Random random = new Random();

            VoltageLineSeries = new ChartValues<double>();
            CurrentLineSeries = new ChartValues<double>();

            Task.Run(() =>
            {
                while (true)
                {
                    VoltageLineSeries.Add(random.Next(200, 300));
                    CurrentLineSeries.Add(random.Next(1, 20));

                    int Count = VoltageLineSeries.Count;
                    if (Count > 0)
                    {
                        XTimeLabels = new string[Count];
                        for (int i = 0; i < Count; i++)
                        {
                            XTimeLabels[i] = (i + 1).ToString();
                        }
                    }

                    Thread.Sleep(2000);
                }
            });
        }

        #endregion

以上代碼下載地址：NiceComponents · Bruce/Learn WPF - 碼雲 - 開源中國 (gitee.com)

 

參考文檔：

WPF繪制圖表-LiveCharts - 橘子香氣 - 博客園 (cnblogs.com)

WPF LiveChart 圖表詳解 - 痕跡g - 博客園 (cnblogs.com)

更多資源請參考官方源碼。