這可能是目前最輕量級、最支援MVVM、可定製性最好的開源WPF Chart控制元件！

至簡之道發表於2020-12-22
MVVM控制元件

由於專案中經常用到Series Chart，而目前市面又實在找不到既支援MVVM，又輕量級的開源Chart控制元件，於是乾脆就花了兩週時間隨手寫了一個。昨天感覺還比較滿意，就釋出到了Github上：https://github.com/zenjia/MvvmChart

特色：

  • 支援MVVM設計模式： 這也是其最大的特色，使用者可以自定義SeriesDataTemplate，並支援SeriesDataTemplateSelector（具體資訊見Github專案簡介）。事實上，當初開發這套控制元件的初衷就是因為找不到開源的支援MVVM的WPF Chart控制元件；
  • 功能豐富：支援多種常用的Line Series（包括Polyline，StepLine，Spline）和Area Series（包括PolylineArea，StepLineArea，SplineArea），支援顯示Item Point。座標軸支援多重放置模式。支援GridLine，CrossHairs等；
  • 高度可定製：Series和Item Point的自定義都可以通過簡單的Binding或修改Style來完成。座標軸的Label文字支援ValueConverter，tick支援使用者顯示指定的資料。
  • 高度可擴充套件：主要的Series類都繼承自基類PathSeries。使用者可以通過實現IGeometryBuilder並將其傳遞給PathSeries的GeometryBuilder屬性來建立自己的Series。理論上，使用者可以自定義自己想要的任何型別，只要它可以通過Path來繪製，因此這種模式具有高度的可擴充套件性；
  • 輕量級：程式碼簡潔，全部程式碼不到5k行。功能專注於常用的Cartesian 2D Series Chart，不包含餅狀圖、柱狀圖等可以簡單通過ItemsControl來繪製的Chart

截圖：

Line Series，無Item Point：（從上自下依次為PolylineSeries、StepLineSeries、SplineSeries）

 

Line Series，帶Item Point：

 

Area Series，不帶Item Point：

Area Series，帶Item Point：

使用方法：

首先定義資料點：

    public class SomePoint
    {
        public double t { get; }
        public double Y { get; }
    }
    
    public class DemoDataViewModel 
    {
        public List<List<SomePoint>> ItemsSourceList { get; }
    }　　

 

 

然後建立DataTemplate：

        <DataTemplate x:Key="SeriesTemplate1">
            <mvvmCharting:PolyLineSeries IndependentValueProperty="t"
                                         DependentValueProperty="Y"
                                         Stroke="Red"
                                         StrokeThickness="1.5"
                                         ItemsSource="{Binding}">
            </mvvmCharting:PolyLineSeries>
        </DataTemplate>

 

最後，建立一個SeriesChart，並引用上面的DateTemplate：

   <mvvmCharting:SeriesChart Background="Bisque"
                             SeriesDataTemplate="{StaticResource SeriesTemplate1}"
                             SeriesItemsSource="{Binding ItemsSourceList, Source={StaticResource GlobalDemoDataViewModel}}">

       <mvvmCharting:SeriesChart.XAxis>
           <axis:XAxis />
       </mvvmCharting:SeriesChart.XAxis>

       <mvvmCharting:SeriesChart.YAxis>
           <axis:YAxis />
       </mvvmCharting:SeriesChart.YAxis>

   </mvvmCharting:SeriesChart>

 

（更多使用Sample見專案裡的Demo工程）

（對UWP的支援將很快加入）

（歡迎批評指正，歡迎提交bug）

 

相關文章