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轴上的最大值并不是在我们地图上使用的值。