使用WPF.LiveChart创建各个样式的Chart

使用WPF.LiveChart创建各个样式的Chart

制作一个usercontrol能随时插入chart控件，chart的style有标准的一套，当然可以更改style。

wpf 的view界面如下：

<UserControl x:Class="Common.Control.View.LiveChartWin"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:Common.Control.View"
             xmlns:lvc="clr-namespace:LiveCharts.Wpf;assembly=LiveCharts.Wpf"
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300">
    <Grid>
        <lvc:CartesianChart x:Name="mychart"   Series="{Binding SeriesCollection}" LegendLocation="Right">
            <lvc:CartesianChart.AxisX>
                <lvc:Axis x:Name="myaxisx" Title="{Binding AxisXName}" Labels="{Binding Labels}" FontWeight="ExtraLight" FontSize="16" MaxRange="1" ></lvc:Axis>
            </lvc:CartesianChart.AxisX>
            <lvc:CartesianChart.AxisY>
                <lvc:Axis Title="{Binding AxisYName}" LabelFormatter="{Binding Formatter}" FontWeight="ExtraLight" FontSize="12"></lvc:Axis>
            </lvc:CartesianChart.AxisY>
            <lvc:CartesianChart.DataTooltip>
                <lvc:DefaultTooltip x:Name="mytooltip"  />
            </lvc:CartesianChart.DataTooltip>
        </lvc:CartesianChart>
    </Grid>
</UserControl>

WPF.LiveChart属性详解：

1.设置折线属性

        #region 设置折线属性
        /// <summary>
        /// 设置折线颜色
        /// </summary>
        public SolidColorBrush lineStroke = new SolidColorBrush(Color.FromRgb(33, 149, 242));
        /// <summary>
        /// 设置折线粗细
        /// </summary>
        public int strokeThickness = 2;
        /// <summary>
        /// 设置折线样式
        /// </summary>
        public DoubleCollection strokeDashArray = null;
        /// <summary>
        /// 设置折线是否光滑
        /// </summary>
        public int lineSmoothness = 1;
        /// <summary>
        /// 设置折线填充颜色
        /// </summary>
        public SolidColorBrush lineFill = new SolidColorBrush(Color.FromRgb(222,239,253));
        #endregion

2.设置轴线 separator

        #region 设置轴线 separator
        /// <summary>
        /// 设置轴线粗细
        /// </summary>
        public int separator_StrokeThickness = 1;
        /// <summary>
        /// 设置轴线颜色
        /// </summary>
        public SolidColorBrush separator_Stroke = new SolidColorBrush(Color.FromRgb(240, 240, 240));
        /// <summary>
        /// 设置轴线标题
        /// </summary>
        public double separator_Step = 1;
        /// <summary>
        /// 设置轴线标题位置
        /// </summary>
        public AxisPosition separator_Position = AxisPosition.LeftBottom;
        /// <summary>
        /// 设置坐标轴标签旋转角度
        /// </summary>
        public int separator_LabelsRotation = 45;
        #endregion

3.设置图表属性

        #region 设置图表
        /// <summary>
        /// 设置图表的背景颜色
        /// </summary>
        public SolidColorBrush chartBackground = System.Windows.Media.Brushes.White;
        /// <summary>
        /// legend位置
        /// </summary>
        public LegendLocation legendLocation = LegendLocation.Right;
        #endregion

4.设置Chart提示

        #region 设置提示

        /// <summary>
        /// 设置提示的背景颜色
        /// </summary>
        public SolidColorBrush tooltipBackground = System.Windows.Media.Brushes.LightCyan;
        /// <summary>
        /// 设置提示的选择模式
        /// </summary>
        public TooltipSelectionMode SelectionMode  =TooltipSelectionMode.OnlySender;

        /// <summary>
        /// 设置提示框的圆角半径
        /// </summary>
        public CornerRadius CornerRadius = new CornerRadius(5);

        #region 设置提示框的边框颜色和大小

        /// <summary>
        /// 边框颜色
        /// </summary>
        public SolidColorBrush tooltipBorderBrush = System.Windows.Media.Brushes.Yellow;

        /// <summary>
        /// 边框大小
        /// </summary>
        public Thickness tooltipBorderThickness = new Thickness(2);
        #endregion

5.图表数据属性

        private string axisXName;

        public string AxisXName
        {
   
            get {
    return axisXName; }
            set {
    axisXName = value;
                //OnPropertyChanged("AxisXName");
            }
        }
        private string axisYName;

        public string AxisYName
        {
   
            get {
    return axisYName; }
            set {
    axisYName = value;
                OnPropertyChanged("AxisYName"); 
            }
        }
        
        /// <summary>
        /// 图表所用数据
        /// </summary>
        private SeriesCollection seriesCollection = new SeriesCollection();
        public SeriesCollection SeriesCollection
        {
   
            get {
    return seriesCollection; }
            set {
    seriesCollection = value; OnPropertyChanged("SeriesCollection"); }
        }
        /// <summary>
        /// 横轴标题
        /// </summary>
        private string[] labels = null;
        public string[] Labels
        {
   
            get {
    return labels; }
            set {
    labels = value; OnPropertyChanged("Labels"); }
        }
        public Func<double, string> Formatter {
    get; set; }
        #region ImContentPanel

        public string ContentToolTip
        {
   
            get
            {
   
                return "图表窗口";
            }
        }
        public ImageSource Icon
        {
   
            get
            {
   
                return null;
            }
        }
        private string _title = "图表窗口";
        public string Title
        {
   
            get
            {
   
                return _title;
            }
            set
            {
   
                _title = value;
            }
        }
        #endregion

6.图表类型

    /// <summary>
    /// 图表类型