WPF自定義圖表源碼

Ⅰ Chart FX for WPF圖表控制項如何簡化圖表（一）

比如說你有一系列的產品，你想要展示關於這些產品一些列的信息，包括產品名稱、版本等。 public class ProctInfo { public string Name { get; set; } public string Version { get; set; } public List<ProctDownloads> Downloads { get; set; } public string LatestRelease { get; set; } } public class ProctDownloads { public double Count { get; set; } } For simplicity we will use a templated listbox to show multiple columns so our first approach to the problem will look like this <ListBox Grid.IsSharedSizeScope="true"> <ListBox.ItemTemplate> <DataTemplate> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto" SharedSizeGroup="ColumnName"/> <ColumnDefinition Width="Auto" SharedSizeGroup="ColumnVersion"/> <ColumnDefinition Width="150" /> <ColumnDefinition Width="Auto" SharedSizeGroup="ColumnRelease"/> </Grid.ColumnDefinitions> <TextBlock VerticalAlignment="Center" Grid.Column="0" Text="{Binding Path=Name}" Margin="4,0"/> <TextBlock VerticalAlignment="Center" Grid.Column="1" Text="{Binding Path=Version}" Margin="4,0"/> <cfx:Chart x:Name="chart1" Grid.Column="2" ItemsSource="{Binding Path=Downloads}" Gallery="Line" Margin="4,0"> <cfx:Chart.Series> <cfx:SeriesAttributes BindingPath="Count"/> </cfx:Chart.Series> <cfx:Chart.LegendBox> <cfx:LegendBox Visibility="Collapsed"/> </cfx:Chart.LegendBox> </cfx:Chart> <TextBlock VerticalAlignment="Center" Grid.Column="3" Text="{Binding Path=LatestRelease}" Margin="4,0"/> </Grid> </DataTemplate> </ListBox.ItemTemplate> </ListBox> 現在在我們上面得到的示例的基礎上進行圖表的簡化： <cfx:Chart x:Name="chart1" Grid.Column="2" ItemsSource="{Binding Path=Downloads}" Gallery="Line" Margin="4,0" Height="20"> <cfx:Chart.Series> <cfx:SeriesAttributes BindingPath="Count" Stroke="Black" StrokeThickness="1"> <cfx:SeriesAttributes.Marker> <cfx:MarkerAttributes Visibility="Collapsed"/> </cfx:SeriesAttributes.Marker> </cfx:SeriesAttributes> </cfx:Chart.Series> <cfx:Chart.LegendBox> <cfx:LegendBox Visibility="Collapsed"/> </cfx:Chart.LegendBox> <cfx:Chart.AxisY> <cfx:Axis Visibility="Collapsed"/> </cfx:Chart.AxisY> <cfx:Chart.AxisX> <cfx:Axis Visibility="Collapsed"/> </cfx:Chart.AxisX> <cfx:Chart.PlotArea> <cfx:PlotAreaAttributes Margin="0" AxesStyle="None" Background="{x:Null}" Stroke="{x:Null}"/> </cfx:Chart.PlotArea> <cfx:Chart.Template> <ControlTemplate> <Border cfx:Chart.PanelName="Plot"/> </ControlTemplate> </cfx:Chart.Template> </cfx:Chart> 在這一步中，我們做了一些簡單的變化，比如說隱藏了里那個軸和標記，同時還設置了一些筆刷，值得注意的是，在這里的plotarea通常是指頁邊空白包圍，但是在一些小的圖表中，不需要這個頁邊空白。因此我們可以將圖表的高度設置到20。 我們也簡化了圖表模版，通過使用預先定義好的樣式可以很好實現，但是這個樣式允許使用legend box或者是dataview。 接下來就是一些調試就可以完成了，注意在默認的情況下，列表框將會改變選定項的前景色為白色，在DataTemplate中需要一個觸發器來完成這個操作： <DataTemplate.Triggers> <DataTrigger Binding="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ListBoxItem}}, Path=IsSelected}" Value="True"> <Setter TargetName="series" Property="Stroke" Value="White" /> </DataTrigger> </DataTemplate.Triggers> 因為DataTemplate 實際上應用於 ContentPresenter，我們需要觸發器找到ListBoxItem類型的第一個ancestor。 雖然說這個圖表很小

Ⅱ WPF圖表控制項Chart FX使用方法系列:如何繪制可視化圓角邊框

有時候需要編寫一個在圖表文本中使用的小類，而且需要在其他的場景中也可以使用。現在來看一下如何在Chart FX for WPF中繪制可視化圓角邊框，RoundClipBorder就是這些類中的一個，它源自於邊緣，但是會使用圓形的邊界來放置內容，接下來來一起看一下一個矩形的邊框： <Border CornerRadius="5" BorderBrush="Black" BorderThickness="2"> <Image Source="pack://siteoforigin:,,,/img/US.png"/> </Border> 如果你仔細的看，會發現在邊界的地方時比較薄的，下面來看看如果增加邊角半徑會發生什麼樣的狀況呢？ 從上面的圖中，顯而易見的發現，WPF繪制的圖表的內容，然後再繪制一個矩形包圍內容，但是現在發現，這個矩形進入了內容的部分，變成了一個溢出的問題，RoundClipBorder通過創建一個幾何圖形，然後切斷它的子組成部分就可以了。 <cfxControls:RoundClipBorder CornerRadius="12" BorderBrush="Black" BorderThickness="2"> <Image Source="pack://siteoforigin:,,,/img/US.png"/> </cfxControls:RoundClipBorder> 還可以將數據綁定到圖表，然後自定義圖表工具提示和顯示數據： public class CountryData { public string Name { get; set; } public double Population { get; set; } public string Language { get; set; } public string Flag { get; set; } public double Sales { get; set;} } <Window.Resources> <ObjectDataProvider x:Key="countryData" ObjectType="{x:Type localData:CountrySalesList}" /> </Window.Resources> <Grid> <ChartFX:Chart> </ChartFX:Chart> </Grid> 第一步：將圖表綁定到頁面中對象數據提供應用程序，然後再選擇區域用於繪制和標簽，在這里可以啟動圖表創建導航來選擇配置數據。 第二步：配置圖表提示工具用於顯示來自選定項目中的其他的數據，在導航中，我們現在選擇導航，在導航工具顯示的配置頁面中選擇了所有的可用區域。 第三步：選擇Flag作為圖像區域，為了達到最後的效果，選擇了圓形剪切。 第四步：單擊完成，運行應用程序就會出現如下所示的圖表和提示：

Ⅲ 如何使用Visifire for WPF創建圖表

1. 下載Visifire for WPF並安裝，安裝好以後該產品會出現在您的工具箱里
2. 創建一個WPF程序，並且引用WPFVisifire.Charts.dll，並且在您的代碼里引用
using Visifire.Charts;
using Visifire.Commons;

3. 添加代碼並且創建和顯示圖表，在該事例中圖表顯示在LayoutRoot里，是一個Grid容器，默認情況下Grid是空白的，必須為該Grid指定一個x:Name="LayoutRoot"

4.同樣地，可以通過修改Height和Width來改變圖表的顯示大小

5.在Window1.xaml.cs里我們可以開始創建圖表了，在 Window1()事件里添加一個CreateChart()函數，在CreateChart()里創建圖表，具體代碼如下：
public Window1()
{
InitializeComponent();

// Call function to create chart
CreateChart();
}
private void CreateChart()
{
// Create a Chart element
Chart chart = new Chart();

// Set chart width and height
chart.Width = 400;
chart.Height = 300;

// Create new DataSeries
DataSeries dataSeries = new DataSeries();

// Number of DataPoints to be generated
int numberOfDataPoints = 10;

// To set the YValues of DataPoint
Random random = new Random();

// Loop and add a few DataPoints
for (int loopIndex = 0; loopIndex < numberOfDataPoints; loopIndex++)
{
// Create a DataPoint
DataPoint dataPoint = new DataPoint();

// Set the YValue using random number
dataPoint.YValue = random.Next(1, 100);

// Add DataPoint to DataSeries
dataSeries.DataPoints.Add(dataPoint);
}

// Add DataSeries to Chart
chart.Series.Add(dataSeries);

// Add chart to the LayoutRoot for display
LayoutRoot.Children.Add(chart);
}

Ⅳ 想在WPF中做一些圖表，有沒有什麼可用的圖表控制項啊

WPF的toolkit里有自帶的chart控制項的。如果你只想做些簡單的圖表展示就夠了。如果你要有很好的用戶體驗和比較多的圖表設置，可以使用第三方控制項中的Chart。推薦Visifire的Chart控制項，它家是專門做wpf,silverlight，wp的圖表控制項的。希望對你的回答有幫助。

Ⅳ WPF圖表控制項Chart FX使用方法系列:如何添加常見圖表類型支持

如果你檢查Chart FX for WPF支持的圖表類型，也就是我那的核心的的dll中所支持的圖表類型列表，你會看見如下內容： public enum Gallery { Bar, Area, Line, Curve, Pie, Scatter, Bubble, Radar, Polar, Doughnut, Gantt, OpenHighLowClose, Candlestick, HighLowClose, TreeMap, CurveArea, Step, Pyramid, Cube, Funnel, Surface, } 但是值得注意的是，這是我們在嚴格意義上使用的圖表類型，所以在這里並不包括了任何的比如stacked/stacked100, 2D/3D等類型。每個在枚舉中的圖表類型將會由一個類來備份，有時這些類會公開它們的附加屬性，比如說：當你創建創建雷達圖的時候會使得上面的線連接點，但是你也可以按照下面的方法繪制區域： 通過其他的類還可以添加一些有趣的功能，Bar類將可以允許條形圖表使用X軸的值，Pie類允許你在任何的切片高度創建3D餅狀圖，等等其他的功能。

Ⅵ wpf 怎麼自定義圖形shape

既然Line,Rectangle等都是繼承自Shape的,直接新建一個類繼承自Sharp.
1 Public Class ALine
2 Inherits Shape
3
4 Protected Overrides ReadOnly Property DefiningGeometry As System.Windows.Media.Geometry
5 Get
6
7 End Get
8 End Property
9 End Class
10

Ⅶ WPF圖表控制項Chart FX使用方法系列:如何創建Win/Loss圖表

<cfx:Chart.AllSeries> <cfx:AllSeriesAttributes> <cfx:AllSeriesAttributes.GalleryAttributes> <cfxwinloss:WinLoss Goal="30" LossFill="#FF8B89" LossStroke="#FF8B89" WinFill="#909090" WinStroke="#909090"/> </cfx:AllSeriesAttributes.GalleryAttributes> </cfx:AllSeriesAttributes> </cfx:Chart.AllSeries> <cfx:Chart.ConditionalAttributes> <cfx:ConditionalAttributes Fill="#007010" Stroke="#007010"> <cfx:ConditionalAttributes.Condition> <cfxData:AndCondition> <cfx:RangeCondition From="30"/> <cfxData:MaximumValueCondition/> </cfxData:AndCondition> </cfx:ConditionalAttributes.Condition> </cfx:ConditionalAttributes> <cfx:ConditionalAttributes Fill="Red" Stroke="Red"> <cfx:ConditionalAttributes.Condition> <cfxData:AndCondition> <cfx:RangeCondition To="30"/> <cfxData:MinimumValueCondition/> </cfxData:AndCondition> </cfx:ConditionalAttributes.Condition> </cfx:ConditionalAttributes> </cfx:Chart.ConditionalAttributes> 最後，將會使用WinLoss顯示一個新的功能，當圖表的尺寸、點數量、或是兩者結合產生的條形時，這個功能在條形圖中非常的有用，問題是使用doubles計算尺寸和位置。比如說，如果現在切換到24點每個產品，設置圖表的尺寸為120像素，就 會出現以下的情況： 在PlotArea中有個新的屬性叫做PixelSnapMethod現在支持三種值： None：默認值，對於所有的操作都使用double Full：確定條的尺寸以及條形之間的距離是固定的，注意這也可能會在圖表側面生成白色區域 Marker：固定條形之間的區域，但是標記可能會有所不同 <cfx:Chart.PlotArea> <cfx:PlotAreaAttributes Margin="0" AxesStyle="None" Background="{x:Null}" Stroke="{x:Null}" PixelSnapMethod="Full"/> </cfx:Chart.PlotArea>

Ⅷ 如何自定義visifire圖表主題和樣式

1. 下載Visifire for WPF並安裝，安裝好以後該產品會出現在您的工具箱里 2. 創建一個WPF程序，並且引用WPFVisifire.Charts.dll，並且在您的代碼里引用 using Visifire.Charts; using Visifire.Commons; 3. 添加代碼並且創建和顯示圖表，在該事例

Ⅸ WPF圖表控制項Chart FX使用方法系列:如何繪制地圖輪廓

這個功能將能夠使得我們在一個3D圖表上添加或控制第三個軸。個人覺得最新的這個SurfaceXYZ圖表最炫的功能就是創使用來自不同城市的數據建地理位置上精確的表面。這個功能可以用於很多的地方，比如說圖表繪制、每個城市會甚至是一個國家的總銷售收入等。 在本次的示例中，我們假設需要顯示整個佛羅里達超過800家店的客戶滿意度，我們將按照城市的字母順序，然而定位指定商店的分數是非常容易的，但是難的是了解國家哪些區域的商店比其他的地方做的更好，並將其繪制在表面上。在另一方面，將會打組所有接近的商店，這樣就會很好的找到最好和最差的區域時哪裡，這種情況特別適合於一個國家的地圖，最終的效果將會如下所示： 選擇一張地圖，我選擇了Mercator墨卡托投影的地圖，也許你還沒注意到，我們已將這個所選的地圖放在了表面。這樣做是因為用於表面的三角測量法將會插入所有的數據到我們的表面上，從墨西哥灣商店的數據收集來造成一種假象。值得注意的是，我們將這張圖蓋住了城市是透明的區域，這樣的話，非透明的海洋將會覆蓋插入的數據就會顯得沒有意義。下面是我們沒有表面的地圖的樣子。 現在已經選擇了地圖，來看看數據資料： <Store CITY="MIAMI" LATITUDE="25.64" LONGITUDE="-80.32" SCORE="91" /> <Store CITY="NORTH MIAMI BEAC" LATITUDE="25.94" LONGITUDE="-80.14" SCORE="89" /> <Store CITY="NORTH MIAMI" LATITUDE="25.89" LONGITUDE="-80.18" SCORE="91" /> <Store CITY="NORTH MIAMI BEAC" LATITUDE="25.93" LONGITUDE="-80.18" SCORE="91" /> <Store CITY="OLYMPIA HEIGHTS" LATITUDE="25.74" LONGITUDE="-80.36" SCORE="92" /> <Store CITY="MIAMI SPRINGS" LATITUDE="25.82" LONGITUDE="-80.30" SCORE="92" /> 我們有著商店的經度和緯度，這將會值得通過GPS找到這個位置非常的容易。接下來，我們要將它轉化成在我們隨所挑選的地圖上的像素值，由於這是一個墨卡托投影，使用下面的公式來進行轉換（φ表示的是經度，λ表示的是緯度）。 一旦將我們的數據格式化之後，就可以將數據傳遞到圖表，看看會得到什麼樣的結果： SurfaceXYZ surfaceXYZ = new SurfaceXYZ(); surfaceXYZ.ShowPointsGridlines = false; surfaceXYZ.ShowSeriesGridlines = false; surfaceXYZ.ShowContourLines = true; chart1.ItemsSource = chartData; SeriesAttributes series0 = new SeriesAttributes(); SeriesAttributes series1 = new SeriesAttributes(); series0.GalleryAttributes = surfaceXYZ; series1.GalleryAttributes = surfaceXYZ; series0.BindingPath = "Score"; series0.BindingPathX = "X"; series1.BindingPath = "Y"; chart1.Series.Add(series0); chart1.Series.Add(series1); 值得注意的是，我們在這里需要兩個系列的XYZ圖表，第二個圖表將會被綁定到Z數據，但是由於我們希望在上面的表面是以一種二維的方式，我們將它稱為「Y」（在地圖上或是在緯度上）。Y軸表示著我們正在傳遞的值，如果這不是二維的圖表，它將會代表著深度或高度。 在表面多餘的代碼，依然會有用，如果在圖表上做一些變動使它變成輪廓。 ChartFX.WPF.View3D view3D = chart1.View3D; view3D.IsEnabled = true; view3D.AngleX = -90; view3D.AngleY = 0; view3D.Projection = Projection.Orthographic; view3D.BackWallVisibility = Visibility.Collapsed; chart1.AxisX.Line.Visibility = Visibility.Hidden; chart1.AxisX.Grids.Major.Visibility = Visibility.Hidden; view3D.Lights.Clear(); System.Windows.Media.Media3D.AmbientLight ambLight = new System.Windows.Media.Media3D.AmbientLight(Color.FromRgb(0xD0, 0xD0, 0xD0)); view3D.Lights.Add(ambLight); 如果你仔細看會發現，這個「Florida shape」看起來有一點扭曲，這個主要是因為我們的輪廓是放置在一個平面上的，而不是我們選擇的地圖的比例設置。此外，在X軸和Z軸上的最大值並不是在我們地圖上使用的值。