這可能是全網最輕量級、對MVVM支持最好、可定制性最高的開源WPF Chart控件了

由於項目中經常用到Series Chart，而翻遍全網又實在找不到既支持MVVM，又輕量級的開源Chart控件，於是干脆就花了兩周時間隨手輪了一個。感覺還比較滿意，就發布到了Github上：https://github.com/zenjia/MvvmChart

特色：

• 支持MVVM設計模式： 這也是其最大的特色，用戶可以通過數據綁定和自定義SeriesDataTemplate、SeriesTemplateSelector來創建series（具體信息見Github項目簡介）；
• 功能豐富：支持多種常用的Line Series（包括Polyline，StepLine，Spline）和Area Series（包括PolylineArea，StepLineArea，SplineArea），支持疊加Item Point。坐標軸支持多種位置放置模式（X軸支持Top和Bottom，Y軸支持Left和Right）。支持GridLine，CrossHairs等；
• 高度可定制：Series和Item Point的自定義都可以通過Binding或修改Style來完成。坐標軸的Label文本支持ValueConverter，tick支持用戶顯示指定的數據；
• 高度可擴展：主要的Series類都繼承自基類PathSeries。用戶可以通過實現IGeometryBuilder並將其綁定到PathSeries的GeometryBuilder屬性來創建自己的Series類型。理論上，利用這種模式，用戶可以創建自己想要的任何Series類型，只要它可以通過Path繪制，因此這種模式具有高度的可擴展性；
• 輕量級：代碼簡潔，整個codebase不到5k行代碼。功能專注於常用的Cartesian 2D Series Chart，不包含餅狀圖、柱狀圖等可以簡單通過ItemsControl來繪制的Chart；
• 高性能：在不顯示Item Point的情況下，繪制10000+的數據毫無壓力

截圖：

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

 

Line Series，帶Item Point：

 

Area Series，不帶Item Point：

Area Series，帶Item Point：

支持DateTime和DateTimeOffset格式：（只需要寫一個double到DateTime格式的string的ValueConverter即可，具體見項目demo）

 

使用方法：

首先定義數據點：

    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>

 可以看到代碼非常簡潔。網上主流的開源Chart控件一般都不支持這種用法，都需要從Xaml或C#顯示添加Series到Chart控件，不支持數據綁定和SeriesDataTemplate，因此不適合用於MVVM開發模式。可以說，對MVVM的原生支持是這套Chart控件的最大特色（事實上，它只支持MVVM開發模式，不支持直接添加Series到Chart，無論是通過Xaml還是c#代碼）。

 

 

 

（更復雜的Sample見項目里的Demo工程）

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

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

 

Update: 

重整了一下代碼，仿照Path，把Scatter類（原ItemPoint類）的基類從Control改成了Shape，這樣性能會更好，定制也更容易。

這是簡單demo的截屏（代碼已經提交到git）

 

這里只是簡單用了一個RectangleGeometry（WPF里的Geometry可以畫更復雜的圖形，借助Blend工具畫出幾乎任意圖形，包括文字）。用戶只需要實現IScatterGeometry接口，並把它賦值或綁定到Scatter.Geometry屬性即可。這樣就和PathSeries的實現統一了起來——二者的定制和擴展都可以通過實現一個接口並把這個對象傳遞到它們的GeometryBuilder屬性來實現。