WPF图表控件-WPFVisifire.Charts简单教程

一、控件介绍

通过最简单的操作方法，自动绘制、展示超级美观好看的图表数据。主要包括：柱形图(Column)、曲线图(Line)、折线图(Step Line)、饼图(Pie)、横道图(Bar)、区域图(Area)、环形图(Doughnut)、堆积柱形图(Stacked Column)、100%堆积柱形图(100% Stacked Column)、堆积横道图(Stacked Bar)、100%堆积横道图(100% Stacked Bar)、堆积区域图(Stacked Area)、100%堆积区域图(100 Stacked Area)、气泡图(Bubble)、散射图(Point)、流线漏斗图(StreamLine Funnel)、漏斗图(Section Funnel)、阴阳烛图(CandleStick)、股票图(Stock)、极区图(Line)、雷达图(Radar)、光滑曲线图(Spline)、高密度曲线图(QuickLine)。

二、使用步骤

1、创建WPF项目，引用DLL：WPFVisifire.Charts.dll

2、XAML前端引用：

<!--引用命名空间-->
xmlns:chart=“clr-namespace:Visifire.Charts;assembly=WPFVisifire.Charts”

<!--使用前台代码创建图表-->
<Border BorderThickness="1" BorderBrush="DarkGray">
   <Grid x:Name="gridChart" Visibility="{Binding Work.OtherData.ShowType, Converter={StaticResource CurveToVisibilityConverter}}">
      <vc:Chart DataContext="{Binding Work.OtherData.SelectedSample.ChartSource}" AnimatedUpdate="True" AnimationEnabled="True" BorderBrush="Gray" >
        <vc:Chart.AxesX>
         <vc:Axis Padding="1"/>
        </vc:Chart.AxesX>
            <vc:Chart.Series>
         <vc:DataSeries RenderAs="Spline" MarkerType="Circle" SelectionEnabled="True" LineThickness="2" DataSource="{Binding PointData}">
             <vc:DataSeries.DataMappings>
               <vc:DataMapping MemberName="AxisXLabel" Path="Item1"/>
               <vc:DataMapping MemberName="YValue" Path="Item2"/>
             </vc:DataSeries.DataMappings>
           </vc:DataSeries>
        </vc:Chart.Series>
      </vc:Chart>
   </Grid>
</Border>

3、后端引用

private void makeChart()
{
  //准备数据源
  var products = new List<Tuple<int, double>>{
                Tuple.Create(12, 0.018),
                Tuple.Create(24, 0.035),
                Tuple.Create(36, 0.053),
                Tuple.Create(48, 0.046),
                Tuple.Create(60, 0.023),
                };
                
  //创建图表
  Chart chart = new Chart();
  
  //创建数据服务对象
  dataSeries = new DataSeries{
                RenderAs = RenderAs.Spline,
                LabelEnabled = true,
                YValueFormatString = "0.000",
                LegendText = "最小值",
                Legend = "销量曲线图",
                SelectionEnabled = true,
                StartAngle = 10,
            };
            
  //创建“数据点”对象，将数据源中指定的属性数据添加至数据服务对象
  //注意X坐标数据类型为：string，Y坐标数据为：double
  products.ForEach( p => {
                var datapoint = new DataPoint
                {
                    AxisXLabel = p.Item1.ToString(),
                    YValue =p.Item2,
                };
                
                //将数据源中每一个数据点，“挂载”到数据服务对象下的数据点对象
                dataSeries.DataPoints.Add(datapoint);
            });
  
  //将数据服务对象添加到图表对象
  //即在图表中“画”一个你需要的图像，若需要在一个图表中“画”更多图像（例如N条曲线），重复上面步骤后添加到同一个图表对象就可以了）
  chart.Series.Add(dataSeries);
  
  //最后将这个图表元素添加到前端布局容器中即可
  this.grid1.Children.Add(chart);
}

三、运行效果

四、主要属性

Chart：

• Theme ：主题系列。 (内置五种主题Theme1、Theme2、Theme3、Theme4、Theme5)
• UniqueColors ：颜色搭配是否唯一
• LightingEnabled：背景高亮（这个效果不太好，一般设为Flase）
• IndicatorEnabled：“柱形图”上直接显示数据
• Titles：标题系列，图表可以有“N”个标题（内部为Title对象列表，其属性有Text(标题名称)、Padding(内间距)）
• View3D：3D效果展示
• AxisX：X轴（内部为Axis对象列表，其属性有AxisMinimum(X轴的最小值)、Suffix(X轴后缀)）
• AxesY：Y轴（与X轴相差不大）
• ColorSet:设置图表色彩(内置: Visifire1, Visifire2,VisiGray,VisiBlue,VisiOrane,VisiGreen,VisiRed,VisiViolet,VisiAqua)
• Width：宽度
• Height：高度
• Margin：外间距
• ToolBarEnabled：是否启用打印和保存图片
• ScrollingEnabled：是否启用或禁用滚动条

Chart.Series：

• DataPoints：数据点列
• RenderAs：图表类型。柱(StackedColumn)、饼、线(Line)、Bar、堆积等
• AxisYType：对应的“Y”轴
• LegendText：图列
• DataPoints ：数据点列

Chart.DataPoint：

• AxisXLabel ：X轴标签
• YValue：对应“Y”轴值
• ToolTipText ：数据点提示信息
• MouseLeftButtonDown：鼠标左键按下事件（dataPoint.MouseLeftButtonDown += new MouseButtonEventHandler(dataPoint_MouseLeftButtonDown);）

五、定时器更新柱状图数据案例

//定时器初始化放入界面初始化中
private DispatcherTimer = new DispatcherTimer();
upcharttimer.Tick += new EventHandler(_timer_Tick);
upcharttimer.Interval = TimeSpan.FromSeconds(1);

public class Demo()
{        
    void _timer_Tick(object sender, EventArgs e)
    {
        float[] disdata = new float[5];
        for(int i=0; i<5; i++)
        {
            disdata[i] = (float)Math.Sqrt(featvec[i * 2] * featvec[i * 2] + featvec[i * 2 + 1] * featvec[i * 2 + 1]);
            chart.Series[0].DataPoints[i].YValue = disdata[i];
        }
    }
        
}

//利用按键进行定时器开始和停止
public class Start()
{
    upcharttimer.Start();
}

public class Stop()
{
    upcharttimer.Stop();
}

六、双折线案例

using Visifire.Charts;//添加命名空间
using Visifire.Commons;

public MainWindow()
{
    InitializeComponent();
    Chart chart = CreateChart();
    this.Simon.Children.Add(chart);
}

public Chart CreateChart()
{
    Chart chart = new Chart();
    chart.ToolBarEnabled = true;//工具箱是否可用：具有保存、打印图片功能
    chart.AnimatedUpdate = true;//是否动画更新
    chart.AnimationEnabled = true;//是否动画可用
    chart.ScrollingEnabled = false;//是否启用或禁止滚动
    chart.IndicatorEnabled = true;//指示线是否可用
    chart.View3D = false;//是否3D效果显示
    chart.Theme = "Theme1";//图表主题设置

    //定义图例（可不定义，图表本身自带图例）：图例位置 + 字体样式
    Legend legend = new Legend();
    legend.HorizontalAlignment = System.Windows.HorizontalAlignment.Right;//水平方向位置
    legend.VerticalAlignment = System.Windows.VerticalAlignment.Center;//竖直方向位置
    legend.FontSize = 12;//字体大小
    legend.FontFamily = new FontFamily("宋体,Times New Roman");//字体样式
    chart.Legends.Add(legend);//图表添加图例

    //定义图表标题：标题文本、字体样式设置
    Title title = new Title();
    title.FontFamily = new FontFamily("宋体,Times New Roman");
    title.Text = "图表名";
    title.FontSize = 20;
    chart.Titles.Add(title);//图表添加标题

    //定义x轴
    Axis xAxis = new Axis();
    xAxis.IntervalType = IntervalTypes.Auto;
    xAxis.Interval = 1;//x轴的间隔
    //定义x轴标签：字体样式设置
    AxisLabels xLabels = new AxisLabels();
    xLabels.FontFamily = new FontFamily("宋体,Times New Roman");
    xLabels.FontSize = 12;
    xAxis.AxisLabels = xLabels;

    //定义y轴
    Axis yAxis0 = new Axis();
    AxisLabels yLabels0 = new AxisLabels();
    yLabels0.FontFamily = new FontFamily("宋体,Times New Roman");
    yLabels0.FontSize = 14;
    yAxis0.Suffix = "kg";//y轴单位设置
    yAxis0.AxisMinimum = 0;//y轴最小值设置
    yAxis0.AxisMaximum = 20;//最大值设置
    yAxis0.AxisLabels = yLabels0;

    //双轴定义方法：定义第二条y轴
    Axis yAxis1 = new Axis();
    yAxis1.AxisType = AxisTypes.Secondary;
    AxisLabels yLabels1 = new AxisLabels();
    yLabels1.FontFamily = new FontFamily("宋体,Times New Roman");
    yLabels1.FontSize = 14;
    yAxis1.Suffix = "m";
    yAxis1.AxisMinimum = 0;
    yAxis1.AxisMaximum = 20;
    yAxis1.AxisLabels = yLabels1;

    chart.AxesX.Add(xAxis);//图表添加x轴
    chart.AxesY.Add(yAxis0);//图表添加y轴
    chart.AxesY.Add(yAxis1);

    //定义第一条数据线
    DataSeries series0 = new DataSeries();
    series0.RenderAs = RenderAs.Line;//图表类型：曲线图、饼图、柱状图
    series0.LabelEnabled = false;//标签是否可见
    series0.LegendText = "图例1";//图例文本内容
    series0.ShowInLegend = true;//图例是否显示
    series0.MarkerType = MarkerTypes.Cross;//曲线上数据点的形状
    series0.MarkerSize = 10;//数据点的形状的大小
    series0.LineThickness = 1;//数据线的粗细

    //数据线添加数据点
    Random r = new Random();
    for (int j = 0; j < 10; j++)
    {
        DataPoint dataPoint = new DataPoint();
        dataPoint.AxisXLabel = "X" + j;//横坐标
        dataPoint.YValue = r.Next(0, 10);//纵坐标
        //数据点的标签字体样式设置
        dataPoint.LabelFontSize = 15;
        dataPoint.LabelFontFamily = new FontFamily("宋体,Times New Roman");
        series0.DataPoints.Add(dataPoint);//数据线添加数据点
    }

    //定义第二条数据线
    DataSeries series1=new DataSeries();
    series1.RenderAs = RenderAs.Line;
    series1.LegendText = "图例2";
    series1.MarkerSize = 10;
    series1.LineThickness = 1;
    series1.AxisYType = AxisTypes.Secondary;//数据线采用第二条y轴

    for (int j = 0; j < 10; j++)
    {
        DataPoint dataPoint = new DataPoint();
        dataPoint.AxisXLabel = "X" + j;
        dataPoint.YValue = r.Next(10, 20);
        dataPoint.LabelFontSize = 15;
        dataPoint.LabelFontFamily = new FontFamily("宋体,Times New Roman");
        series1.DataPoints.Add(dataPoint);
    }

    //图表添加数据线
    chart.Series.Add(series0);
    chart.Series.Add(series1);
    return chart;
}

效果图：

七、相关注意事项

1. 如果加载时需要动态效果需要在后台以new Chart()的方式创建图表，然后将其加入到指定容器即可达到期望效果。
2. 在以数据绑定方式显示图表数据时,相关页面代码如下：

<vc:Chart.Series>
     <vc:DataSeries RenderAs="Spline" MarkerType="Circle"  SelectionEnabled="True" LineThickness="2" DataSource="{Binding PointData}">
         <vc:DataSeries.DataMappings>
             <!--注意：这个vc的DataContext我绑定了一个对象
                 该对象下有一个名为PointData的属性，这个属性类型我定义为：IEnumerable，
                 在实际赋值时我将一个List<Tuple<string, double>>赋给了它-->
             <!--属性映射
                 若你绑定的是一个对象列表，则Path要改为该对象的对应属性-->
             <vc:DataMapping MemberName="AxisXLabel" Path="Item1"/>
             <vc:DataMapping MemberName="YValue" Path="Item2"/>
         </vc:DataSeries.DataMappings>
     </vc:DataSeries>
</vc:Chart.Series>