zoukankan      html  css  js  c++  java
  • LiveCharts文档-3开始-3类型和设置

    LiveCharts文档-3开始-3类型和设置

    类型和设置

    这一部分非常的重要,涉及到LiveCharts的基本构成单元的介绍
    LiveChart可以绘制任何类型,甚至是自定义的类型,且不丢失强类型语言的好处,原理很简单,当你传递一个泛型集合的时候,LiveChart会拉取X和Y值(笛卡尔Chart),你不需要定义每个类型来绘制它。库已经知道怎么绘制,double,int,decimal,short ,float,long还有其他特别设计的类型,ObservableCollection,ObservablePoint,ScatterPoint,DateTimePoint,HeatPoint,OHLPoint,PolarPoint.所以的这些类型都可以在属性改变的时候通知chart进行更新,下面的例子就使用了这些类型,你也可以自己定义自己需要的类型。

    var doubleValues = new ChartValues<double> { 1, 2 ,3 };
    var intValues = new ChartValues<int> { 1, 2 ,3 };
     
    //the observable value class is really helpful, it notifies the chart to update
    //every time the ObservableValue.Value property changes
    var observableValues = new ChartValues<LiveCharts.Defaults.ObservableValue> 
    { 
        new LiveCharts.Defaults.ObservableValue(1), //initializes Value property as 1
        new LiveCharts.Defaults.ObservableValue(2),
        new LiveCharts.Defaults.ObservableValue(3)
    };
    

    你可以注意到,chart总是使用X,Y坐标来绘制(笛卡尔坐标系),但是一个组double,int,long值库也能够绘制是怎么一回事?
    很简单,X是这组数组当中的index,Y就是你传递的值。当然,这只是你使用横向序列的时候是这样,如果你使用纵向序列,那么X就是传递的值,Y就是Index。

    var myValues = new LiveCharts.ChartValues<double>
    {
      10, //index 0
      6,  //index 1
      9,  //index 2
      2,  //index 3
      7   //index 4
    }
    

    实际的坐标是:

    已经定义了拉取坐标的配置:
    横向坐标:

    new CartesianMapper<double>()
      .X((value, index) => index) //use the index as X
      .Y((value, index) => value) //use the value as Y
    

    纵向坐标:

    new CartesianMapper<double>()
      .X((value, index) => value) //use the value as X
      .Y((value, index) => index) //use the index as Y
    

    X和Y只是对于笛卡尔Chart有必要,但是当你想要绘制一个雷达图(半径和角度)或者金融Chart的时候,该怎么配置?所以我创建了一个 Mappers类型,这个类型会返回一个正确mapper的实例,有很多选项,Xy,Financial,Bubble和Polar,上面的mappers将会被取代为:

    Mappers.Xy<double>()
      .X((value, index) => index) //use the index as X
      .Y((value, index) => value) //use the value as Y
    

    下面是多重mappers,这些是根据你的情况来设定的。

    //X and Y
    var mapper = Mappers.Xy<ObservablePoint>() //in this case value is of type <ObservablePoint>
        .X(value => value.X) //use the X property as X
        .Y(value => value.Y); //use the Y property as Y
     
    //X, Y and Weight
    var mapper = Mappers.Bubble<BubblePoint>()
                    .X(value => value.X)
                    .Y(value => value.Y)
                    .Weight(value => value.Weight);
     
    //Angle and Radius
    var mapper = Mappers.Polar<PolarPoint>()
        .Radius(value => value.Radius) //use the radius property as radius for the plotting
        .Angle(value => value.Angle); //use the angle property as angle for the plotting
     
    //Open, High, Low and Close
    var mapper = Mappers.Financial<OhlcPoint>()
                    .X((value, index) => index)
                    .Open(value => value.Open)
                    .High(value => value.High)
                    .Low(value => value.Low)
                    .Close(value => value.Close);
    

    你可以通过多种方式设定mappers:
    1.Global级别
    这种方法在你的应用程序级别保存设置,每次LiveCharts检查Chart Values实例中的类型的时候,它都会使用这个mapper,除非SeriesCollection mapper和Series mapper是null。

    var mapper1 = Mappers.Xy<int>()
      .X((value, index) => index) 
      .Y(value => value);
    LiveCharts.Charting.For<int>(mapper1, SeriesOrientation.Horizontal); //when horizontal
     
    var mapper2 = Mappers.Xy<int>()
      .X(value => value) //use the value (int) as X
      .Y((value, index) => index);
    LiveCharts.Charting.For<int>(mapper2, SeriesOrientation.Vertical); //when vertical
    

    另外一个例子就是自定义类型,ObseravableCollection类只包含两个属性,X和Y,请注意这次我给横向和纵向使用了同样的设置,并没有传递第二个参数。

    For<ObservablePoint>(Mappers.Xy<ObservablePoint>()
      .X((value, index) => value.X) 
      .Y(value => value.Y));`
    

    如果这个还不是很明白,可以去源码里找到更多细节。
    2.Series Collection级别
    但当你定义一个Series Collection的时候,你也可以传递一个默认的配置,这个配置将会覆盖掉全局配置,除非Series级别的配置是null。

    var mapper = Mappers.Xy<MyClass>().X(v => v.XProp).Y(v => v.YProp);
    var seriesCollection = new SeriesCollection(mapper);
    myChart.SeriesCollection = seriesCollection;
    

    3.特定的Series级别
    最后,如果只是为了设定一个Series,你可以定义一个特定的mapper用于它,这个配置会覆盖掉Global和Series Collection级别的配置。

    var mapper = Mappers.Xy<MyClass>().X(v => v.XProp).Y(v => v.YProp);
    var pieSeries = new PieSeries(mapper);
    

    通知Chart自动更新

    你可以实现IObservableChartPoint接口,从而实现当自定义类型的属性改变的时候,Chart会自动进行更新。下一个例子你将会看到 ObservableValue类型的定义,看看它是怎么在Value改变的时候通知Chart改变的。这个很好理解,你只需要每次在设定Value属性的值的时候,触发一个PointChanged事件就可以了。

    public class ObservableValue : IObservableChartPoint
    {
        private double _value;
        public ObservableValue()
        {
                
        }
     
        public ObservableValue(double value)
        {
            Value = value;
        }
    
       public event Action PointChanged;
       public double Value
       {
           get { return _value; }
           set
           {
               _value = value;
               OnPointChanged();
           }
       }
     
       protected void OnPointChanged()
       {
           if (PointChanged != null) PointChanged.Invoke();
       }
    }
    

    本节内容完

  • 相关阅读:
    EChart.js 简单入门(转)
    C# 接口的特点、接口的作用、接口的简单应用1(转)
    C# 接口的特点、接口的作用、接口的简单应用(转)
    jquery实现全选、全消、反选功能
    python函数式编程-------python2.7教程学习【廖雪峰版】(五)
    python高级-------python2.7教程学习【廖雪峰版】(四)
    python函数-------python2.7教程学习【廖雪峰版】(三)
    python基础-------python2.7教程学习【廖雪峰版】(二)
    python语言特性-------python2.7教程学习【廖雪峰版】(一)
    jquery基础研究学习【基础】
  • 原文地址:https://www.cnblogs.com/newlifechou/p/8275281.html
Copyright © 2011-2022 走看看