Android开发Android开发Android技术知识

MPAndroid 中文文档（转）

2018-07-21  本文已影响12人  no白菜

文章转载自：https://github.com/tuteng/MPAndroidChart
https://github.com/PhilJay/MPAndroidChart
https://github.com/PhilJay/MPAndroidChart/wiki
http://blog.csdn.net/guijiaoba/article/details/41444697

开始

安装

为了使用 LineChart, BarChart, ScatterChart, CandleStickChart, PieChart or RadarChart，像下面一样定义它在 .xml中：

        <com.github.mikephil.charting.charts.LineChart
            android:id="@+id/chart"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

然后通过下面的方式从你的Activity， Fragment诸如此类的东西中检索它：

        LineChart chart = (LineChart) findViewById(R.id.chart);

或者创建它在代码中（然后增加它到一个布局中）：

        LineChart chart = new LineChart(Context);

        RelativeLayout rl = (RelativeLayout) findViewById(R.id.relativeLayout);
        rl.add(chart);

更新

数据记录

通用图表项目样式

下面是一些你能直接使用在图表项目中的通用的样式方法。

与图表交互

这个库允许你完全自定义与图表视图触摸交互的各种情况以及对交互其作用的回调方法。

打开/关闭交互

通过编程自动高亮

编程自动高亮将不产生OnChartValueSelectedListener回调

选择回调

这个库提供了大量的监听回调在交互后。其中一个是OnChartValueSelectedListener，在触屏高亮值的时候进行回调。

        public interface OnChartValueSelectedListener {
            /**
            * Called when a value has been selected inside the chart.
            *
            * @param e The selected Entry.
            * @param dataSetIndex The index in the datasets array of the data object
            * the Entrys DataSet is in.
            * @param h the corresponding highlight object that contains information
            * about the highlighted position
            */
            public void onValueSelected(Entry e, int dataSetIndex, Highlight h);
            /**
            * Called when nothing has been selected or an "un-select" has been made.
            */
            public void onNothingSelected();
        }

让你的类接收回调实现这个接口并设置它作为图表的一个listener

        chart.setOnChartValueSelectedListener(this);

手势回调

OnChartGestureListener将允许你对图表上的手势作出反应：

        public interface OnChartGestureListener {
        
            /**
             * Callbacks when the chart is longpressed.
             * 
             * @param me
             */
            public void onChartLongPressed(MotionEvent me);
        
            /**
             * Callbacks when the chart is double-tapped.
             * 
             * @param me
             */
            public void onChartDoubleTapped(MotionEvent me);
        
            /**
             * Callbacks when the chart is single-tapped.
             * 
             * @param me
             */
            public void onChartSingleTapped(MotionEvent me);
        
            /**
             * Callbacks then a fling gesture is made on the chart.
             * 
             * @param me1
             * @param me2
             * @param velocityX
             * @param velocityY
             */
            public void onChartFling(MotionEvent me1, MotionEvent me2, float velocityX, float velocityY);
        }

让你的类接收回调实现这个接口并设置它作为图表的一个listener

        chart.setOnChartGestureListener(this);

The Axis(AxisBase)

此页关注AxisBase类，他是XAxis和YAxis的基类。

下面提及的方法在两个轴上都能使用。

这个轴类允许对下面的组件或部分指定具体的样式：

控制轴的哪部分应该被绘制

修改轴线样式

限制线

两个轴支持LimitLines的调用允许呈现专用信息，像边界或者约束。LimitLines添加到YAxis会在水平方向绘制，垂直方向绘制需要添加到XAxis。下面是你如何增加和移除LimitLines从YAxis：

限制线（类 LimitLine）（也称为指示线）是明确和简单的线能给使用者提供额外的信息。

这是一个例子，你的图表可以展示已经用应用登录的用户的多种形式的血压测量结果。为了通知用户心动血压超过140mmhg被考虑会有健康风险，你可以增加一个LimitLine在140处来提供那条信息。

例子：
YAxis leftAxis = chart.getAxisLeft();

        LimitLine ll = new LimitLine(140f, "Critical Blood Pressure");
        ll.setLineColor(Color.RED);
        ll.setLineWidth(4f);
        ll.setTextColor(Color.BLACK);
        ll.setTextSize(12f);
        // .. and more styling options

        leftAxis.addLimitLine(ll);

XAxis (XLabels)

这个XAxis是AxisBase的子类

XAxis类（在2.0.0之前是XLabels),是一切与水平轴相关的数据和信息的容器。每个 Line-, Bar-, Scatter CandleStickChart和 RadarChart 都有一个XAxis对象，XAxis将显为一个ArrayList<String> 或者 String[]和交给ChartData对象的是什么。
XAxis类允许对下面的组件或部分指定具体的样式：

为了取得XAxis类的实例，调用下面的方法：

        XAxis xAxis = chart.getXAxis();

自定义轴线的值

例子：

        XAxis xAxis = chart.getXAxis();
        xAxis.setPosition(XAxisPosition.BOTTOM);
        xAxis.setTextSize(10f);
        xAxis.setTextColor(Color.RED);
        xAxis.setDrawAxisLine(true);
        xAxis.setDrawGridLines(false);
        // and more...

YAxis(YLabels)

YAxis类（在2.0.0之前是Ylabels),是一切与垂直轴相关的数据和信息的容器。每个 Line-, Bar-, Scatter or CandleStickChart都有一个左和一个右的YAxis对象，分别负责左边或者右边。RadarChart只有一个YAxis。默认，图表的所有轴在被绘制的时候都被绘制。
YAxis类允许对下面的组件或部分指定具体的样式：

为了取得YAxis类的实例，调用下面的方法：

        YAxis leftAxis = chart.getAxisLeft();
        YAxis rightAxis = chart.getAxisRight();
        
        YAxis leftAxis = chart.getAxis(AxisDependency.LEFT);
        
        YAxis yAxis = radarChart.getYAxis(); // this method radarchart only

在运行时刻，使用 public AxisDependency getAxisDependency()来确定图表轴呈现的边。

自定义轴线的值

代码例子：

        YAxis yAxis = mChart.getAxisLeft();
        yAxis .setTypeface(...); // set a different font
        yAxis .setTextSize(12f); // set the textsize
        yAxis.setValueFormatter(new MyValueFormatter());
        //... and more

设置数据

如果你想增加值（数据）到图表中，它必须用下面这个方法。

         public void setData(ChartData data) { ... }

基类ChartData类封装了所有的数据和信息那是在图表绘制期间需要的。对于每种类型的图表，ChartData的不同的子类（例如LineData）存在应该被用来为图表设置数据。在构造函数中，你能移交数据到ArrayList模板，并且作为值来显示，另外字符串的ArrayList将描述在x轴的标签。例如类LineData（继承自ChartData），用来增加数据到LineChart：

            // this is just one of many constructors
        public LineData(ArrayList<String> xVals, ArrayList<LineDataSet> sets) { ... }

因此，什么是DataSet为什么需要它？那实际上相当简单。在图表内互相在一起的数据集对象表示一组条目（数据条目类型）。它被设计用来区分在图表中逻辑上不同组的值。对于每种类型的图表，扩展数据集 （例如 LineDataSet） 的不同对象存在允许特定的样式。
作为一个例子，你可能想用LineChart展示两个不同公司的季度收入在一年中的。在这种情况下，建议你创建两个不同的LineDataSet对象，每个包含四个值（每个代表一个季度）。用ArrayList来描述x轴上的标签，你可以简单的提供四个字符串“1.Q”,“2.Q”,“3.Q”,“4.Q"
当然，你只提供一个包含两个公司8个值的LineDataSet对象也是可以的。

那么怎么设置一个LinDataSet对象呢？

         public LineDataSet(ArrayList<Entry> yVals, String label) { ... }

在查找构造函数时（不同的构造函数可用），它是可见的，LinedataSet需要一个ArrayList条目类型和一个字符串用来描述LineDataSet以及用于图表标签。更进一步这个标签能被用来寻找在LineData对象中除LineDataSet对象外的其他LineDataSet。
ArrayList条目类型封装了图表的所有值。一个Entry对象除了封装它周围的值还保存了它自己的值，它的位置在x轴（在LineData对象的字符串类型的ArrayList里面值的索引被映射）：

         public Entry(float val, int xIndex) { ... }

把它们放在一起（例如两个公司 一年里的季度收入）：
首先，创建Entry的类型的列表保存你的值：

         ArrayList<Entry> valsComp1 = new ArrayList<Entry>();
         ArrayList<Entry> valsComp2 = new ArrayList<Entry>();

然后，填充列表用Entry对象。确保entry对象包含正确的x轴的索引（当然，一个循环能在这儿被使用，在这种情况下，循环计数器可以为x轴的索引）。

        Entry c1e1 = new Entry(100.000f, 0); // 0 == quarter 1
        valsComp1.add(c1e1);
        Entry c1e2 = new Entry(50.000f, 1); // 1 == quarter 2 ...
        valsComp1.add(c1e2);
        // and so on ...
    
        Entry c2e1 = new Entry(120.000f, 0); // 0 == quarter 1
        valsComp2.add(c2e1);
        Entry c2e2 = new Entry(110.000f, 1); // 1 == quarter 2 ...
        valsComp2.add(c2e2);
        //...

现在我们有了Entry对象的列表，LineDataSet对象可以被创建：

        LineDataSet setComp1 = new LineDataSet(valsComp1, "Company 1");
        LineDataSet setComp2 = new LineDataSet(valsComp2, "Company 2");

但是还没完，我们创建一个DataSets的列表和一个x轴条目的列表并且构建我们的ChartData对象：

        ArrayList<LineDataSet> dataSets = new ArrayList<LineDataSet>();
        dataSets.add(setComp1);
        dataSets.add(setComp2);
    
        ArrayList<String> xVals = new ArrayList<String>();
        xVals.add("1.Q"); xVals.add("2.Q"); xVals.add("3.Q"); xVals.add("4.Q"); 
    
        LineData data = new LineData(xVals, dataSets);
        mLineChart.setData(data);
        mLineChart.invalidate(); // refresh

在调用了invalidate（）之后图表被刷新并且提供的数据被绘制。

设置颜色

自从发布1.4.0之后，在以前版本中负责颜色设置的ColorTemplate对象不在需要。然而它依然保存了所有与定义的颜色数组（例如ColorTemplate.VORDIPLOM_COLORS）并且提供了方便的方法为了从资源（资源整数）转换颜色到真正的颜色。
取代了ColorTemplate，颜色现在能被直接指定在DataSet对象中，那将允许区分每种DataSet样式。

在这个简短的例子中，我们有两个不同的LineDataSet对象来代表两家公司的季度收入（在前面设置数据指南中提到的），我们现在想设置不同的颜色。

我们想做如下：

代码看上去像下面：

  LineDataSet setComp1 = new LineDataSet(valsComp1, "Company 1");
  // sets colors for the dataset, resolution of the resource name to a "real" color is done internally
  setComp1.setColors(new int[] { R.color.red1, R.color.red2, R.color.red3, R.color.red4 }, Context);

  LineDataSet setComp2 = new LineDataSet(valsComp2, "Company 2");
  setComp2.setColors(new int[] { R.color.green1, R.color.green2, R.color.green3, R.color.green4 }, Context);

除了以上，有许多其他的方法来给数据集设置颜色。下面是完整的文档：

ColorTemplate例子：

    LineDataSet set = new LineDataSet(...);
    set.setColors(ColorTemplate.VORDIPLOM_COLORS);

如果没有颜色被设置对于数据集，默认颜色被使用

数据格式化

这个ValueFormatter接口可以用来创建定制格式化程序类允许格式化图标中的数据或这Y轴上的数据。

使用ValueFormatter仅需要创建一个新的类和实现他的接口并且从getFormattedValue(float value)返回任何你想要显示的文本。

自定义格式化的例子：

        public class MyValueFormatter implements ValueFormatter {
        
            private DecimalFormat mFormat;
        
            public MyValueFormatter() {
                mFormat = new DecimalFormat("###,###,##0.0"); // use one decimal
            }
        
            @Override
            public String getFormattedValue(float value) {
                return mFormat.format(value) + " $"; // append a dollar-sign
            }
        }

然后设置你需要格式化的YAxis, ChartData或者DataSet对象:

        // usage on axis
        yAxis.setValueFormatter(new MyValueFormatter());

        // usage on whole data object
        lineData.setValueFormatter(new MyValueFormatter());

        // usage on individual dataset object
        lineDataSet.setValueFormatter(new MyValueFormatter());

特殊图表设置

在章节1的通用图标设置和样式函数适用于所有之前提及的图表类型。这个章节关注特殊设置用于独特的图标类型。

饼图

图例

默认，所有的图表类型支持图例并且将自动生成绘制出图例在为图表设置数据之后。图例通常包含多种条目每个标签代表一个形状。
自动生成的图例包含的项数取决于不同的颜色 （在所有数据集对象中） 以及数据集标签数目。图例标签依赖于在图表中使用的数据集对象设置的标签。在数据集对象中如果没有标签被制定，图表将自动生成它们。如果多种颜色被用在一个数据集中，这些颜色分组并且只被一个标签描述。
对于自定义的图例，你能从图表中检索图例对象使用getLegend()方法：

    Legend legend = chart.getLegend();

控制图例是否被绘制

修改图例样式

自定义图例

例子：

        Legend l = chart.getLegend();
        l.setFormSize(10f); // set the size of the legend forms/shapes
        l.setForm(LegendForm.CIRCLE); // set what type of form/shape should be used
        l.setPosition(LegendPosition.BELOW_CHART_LEFT);
        l.setTypeface(...);
        l.setTextSize(12f);
        l.setTextColor(Color.BLACK);
        l.setXEntrySpace(5f); // set the space between the legend entries on the x-axis
        l.setYEntrySpace(5f); // set the space between the legend entries on the y-axis
        // and many more...

动态和实时数据

为了动态增加或者移除数据到图表，有多种方法允许你增加或者移除条目对象到一个存在的数据集或者从数据集对象到一个存在的ChartData对象。

类DataSet（和所有的子类）：

类ChartData（和所有的子类）

另外也有几个方法来动态的移除数据。

类DataSet（和所有的子类）：

类ChartData（和所有的子类）：

修改Viewport

这个库包含各种方法修改视口，请注意这些方法仅适用于LineChart, BarChart, ScatterChart and CandleStickChart。

请注意所有修改视口方法调需要在图标设置数据之后。

约束显示什么

移动视图

完整例子：
chart.setData(...); // first set data

        // now modify viewport
        chart.setVisibleXRange(20); // allow 20 values to be displayed on the x-axis
        chart.moveViewToX(10); // set the left edge of the chart to x-index 10

        // refresh
        chart.invalidate();

动画

注意：动画只能工作在API级别11(Android 3.0.x)或更高

在低版本Android使用，动画将不执行（但是也不崩溃）

所有的图表类型都支持动画，那能被用来创建图表以一种很酷的方式。有三种类型的动画方法存在通过x轴，y轴或者两个轴来区分：

如果animate（...)（任何类）被调用,不用再调用invalidate()来刷新图表。

动画缓冲

这个库允许你为你的动画使用好的缓冲函数。你能选着下面预定义的静态Easing.EasingOption

    public enum EasingOption {
          Linear,
          EaseInQuad,
          EaseOutQuad,
          EaseInOutQuad,
          EaseInCubic,
          EaseOutCubic,
          EaseInOutCubic,
          EaseInQuart,
          EaseOutQuart,
          EaseInOutQuart,
          EaseInSine,
          EaseOutSine,
          EaseInOutSine,
          EaseInExpo,
          EaseOutExpo,
          EaseInOutExpo,
          EaseInCirc,
          EaseOutCirc,
          EaseInOutCirc,
          EaseInElastic,
          EaseOutElastic,
          EaseInOutElastic,
          EaseInBack,
          EaseOutBack,
          EaseInOutBack,
          EaseInBounce,
          EaseOutBounce,
          EaseInOutBounce,
      }

基本上有两种缓冲动画：

1、预定义缓冲动画：（这些代码可以运行在任何安卓版本）

    public void animateY(int durationmillis, Easing.EasingOption option);

使用预定义缓冲选项调用任何动画方法

    // animate both axes with easing
    mChart.animateY(3000, Easing.EasingOption.EaseOutBack);

在安卓3.0（API Level 11）以下版本总是使用Easing.EasingOption为预定义缓冲动画。

2、自定义缓冲函数：（自定义缓冲函数在安卓3.0以下会崩溃）

    public void animateY(int durationmillis, EasingFunction function);

创建自定义缓冲动画通过创建你自己的缓冲函数和实现EasingFunction接口：

     /**
      * Interface for creating custom made easing functions. 
      */
      public interface EasingFunction {
         /**
          * Called everytime the animation is updated.
          * @param input - the time passed since the animation started (value between 0 and 1)
          */
          public float getInterpolation(float input);
      }

下面是调用这个的方法（注意，这个运行在安卓3.0以下会奔溃）

     // animate both axes with easing
     mChart.animateY(3000, new MyEasingFunction());

MarkerView

MakerView类能被任何用户创建的类扩展为了展示自定义的（弹窗）View无论何时要在图表中高亮一个值。

设置或者得到marker

自定义实现

下面是一个看上去比较想MarkerView自定义实现的例子。比较重要的是你可以根据以下方法实现它：

    public class CustomMarkerView extends MarkerView {
    
        private TextView tvContent;
    
        public CustomMarkerView (Context context, int layoutResource) {
            super(context, layoutResource);
            // this markerview only displays a textview
            tvContent = (TextView) findViewById(R.id.tvContent);
        }
    
        // callbacks everytime the MarkerView is redrawn, can be used to update the
        // content (user-interface)
        @Override
        public void refreshContent(Entry e, int dataSetIndex) {
            tvContent.setText("" + e.getVal()); // set the entry-value as the display text
        }
    
        @Override
        public int getXOffset() {
            // this will center the marker-view horizontally
            return -(getWidth() / 2);
        }
    
        @Override
        public int getYOffset() {
            // this will cause the marker-view to be above the selected value
            return -getHeight();
        }
    }

在设置了自定义的标记类之后，创建一个.xml的布局来呈现你的标记。在这个例子中布局包含一个带背景图片的相对布局还包含一个TextView。当然你可以创建任何你想到的布局在这里。

    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="wrap_content"
        android:layout_height="40dp"
        android:background="@drawable/markerImage" >
    
        <TextView
            android:id="@+id/tvContent"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="7dp"
            android:layout_marginLeft="5dp"
            android:layout_marginRight="5dp"
            android:text=""
            android:textSize="12dp"
            android:textColor="@android:color/white"
            android:ellipsize="end"
            android:singleLine="true"
            android:textAppearance="?android:attr/textAppearanceSmall" />
    
    </RelativeLayout>

最后，在你创建了你自己的MarkerView之后，在图表中设置它。在创建你的MarkerView的时候，确保你提供了布局资源在你创建的.xml中。

    CustomMarkerView mv = new CustomMarkerView (Context, R.layout.custom_marker_view_layout);
    
    // set the marker to the chart
    chart.setMarkerView(mv);

ChartData类

这个维基条目旨在更好地洞察 MPAndroidChart 背后的数据模型。
ChartData类是所有数据类的基类（子类），像LineData，BarData，...等等。它被用来为Chart提供数据像图表中的setData()方法。

        public class LineData extends ChartData { ...

下面提到的方法被实现在ChartData类中，因此也能被用在所有子类中。

数据样式

Getters/Convenience

clearing

Data类详情

这个wiki条目集中于ChartData类的子类。此处未提到的ChartData的所有其他子类不提供任何具体的增强功能。

BarData（类 BarData）

ScatterData(类 ScatterData）

PieData(类 PieData)

CombinedData(类 CombinedData）

这个数据对象被设计用来包含所有其他数据对象的实例。使用setData（）方法来为这个对象提供数据。这只能被CombinedChart使用。
里面看上去像下面这样：

        public class CombinedData extends ChartData {
        
            // ...
        
            public CombinedData(List<String> xVals) { ... }
        
            public CombinedData(String[] xVals) { ... }
        
            public void setData(LineData data) { ... }
        
            public void setData(BarData data) { ... }
        
            public void setData(ScatterData data) { ... }
        
            public void setData(CandleData data) { ... }
        
            // ...
        }

DataSet类

DataSet类是所有data-set类（子类）的基类，像LineDataSet，BarDataSet,...等等。

    public class DataSet extends LineDataSet { ...

DataSet类代表一组或者一种类型的条目中关系比较近的图表。它被设计用来区分在图表中逻辑上不同组的值（例如在LineChart中的具体行的值，或者在BarChart中的具体组的值）。
下面提到的方法被实现在DataSet类中因此也能被用在其所有的子类中。

数据样式

如果在整个数据对象（不是data-set）中有相同的颜色，你可以只调用上述之一提到的ChartData对象。

Getters/Convenience

DataSet类详细说明

这个wiki条目集中于DataSet类的子类。此处未提到的ChartData的所有其他子类不提供任何具体的增强功能。

Line-, Bar-, Scatter- & CandleDataSet （下面提到的方法能被用在任何提到的DataSet类中）

Line- & RadarDataSet(只适用于LineDataSet 和 RadarDataSet的方法）

LineDataSet（类LineDataSet）

BarDataSet(类 BarDataSet）

ScatterDataSet（类 ScatterDataSet）

CandleDataSet（类 CandleDataSet）

PieDataSet（类 PieDataSet）

其他项

图表内容

有用的getter方法

一些更多的方法（Chart类的）

上一篇下一篇

猜你喜欢

热点阅读