binbinyang--2.MPAndroidChart API介绍

来源:互联网 发布:linux发行版排行 2016 编辑:程序博客网 时间:2024/04/29 19:55

最近在做mWork的时候.销售报表是要用到圆饼图的..于是在github上找了一圈开源的第三方图表库.发现了这个--MPAndroidChart

我本人是不太想用之前用过的第三方的图库的..上一个APP 用过  WilliamChart/hellocharts

现在来介绍一下 这个MPAndroidChart  MPAndroidChart的效果还是蛮好的,提供各种动画,这个也是我使用MPAndroidChart

Github地址连接,后面是youtube上面演示MPAndroidChart的视频,MPAndroidChart由于提供了动画效果,为了兼容低版本的Android系统,MPAndroidChart需要添加nineoldandroids-2.4.0-2.jar作为依赖库,所以如果项目中使用这个表格库,需要同时导入这个两个jar,当然如果使用libproject的方式,就不用了。

https://github.com/PhilJay/MPAndroidChart

https://www.youtube.com/watch?v=ufaK_Hd6BpI

http://nineoldandroids.com/

1、创建

在Xml文件中定义LineChart,PieChart,BarChart, ScatterChart, CandleStickChart, BubbleChart or RadarChart ,
 <com.github.mikephil.charting.charts.LineChart        android:id="@+id/wendu"        android:layout_width="match_parent"        android:layout_height="200dp"        android:layout_marginBottom="10dp"/>

<com.github.mikephil.charting.charts.PieChart        android:id="@+id/mPieChart"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:background="#ffffff"/>

 <com.github.mikephil.charting.charts.BarChart        android:id="@+id/barchart"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:background="#ffffff"/>

后面的同理只要在  
com.github.mikephil.charting.charts.这里加上你要用的

 在Activity或者Fragment中引用

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

2、刷新

invalidate():这个方法能使图表重绘.要使图表更改生效,这个方法是必要的。notifyDataSetChanged(): 让图表知道它的基础数据发生更改,并执行所有必要的重新计算(offsets, legend, maxima, minima, ...)。 动态添加数据时,这是必须调用的。

3、打印日志

setLogEnabled(boolean enabled): 设置为true会激活log输出。 使用这种log会对性能造成影响, 没有必要用的话关掉它。

4、图表样式

一些样式相关方法,可以直接使用有关更详尽单独图表类型的样式和设置,请看看具体的图表设置的wiki页面specific chart settingssetBackgroundColor(int color): 设置整个图表视图的背景setDescription(String desc): 右下角对图表的描述信息setDescriptionColor(int color): 描述信息的颜色setDescriptionPosition(float x, float y): 自定义描述信息位置.setDescriptionTypeface(Typeface t): 自定义描述信息字体setDescriptionTextSize(float size): 自定义描述信息字体大小, 最小值6f, 最大值16f.setNoDataTextDescription(String desc): 设置空表的描述信息setDrawGridBackground(boolean enabled): 是否绘制网格背景setGridBackgroundColor(int color): 设置网格背景颜色setDrawBorders(boolean enabled): 是否绘制边线setBorderColor(int color):边线颜色setBorderWidth(float width):边线宽度,单位dpsetMaxVisibleValueCount(int count): 设置图表绘制可见标签数量最大值. 仅在setDrawValues() 启用时生效

二、图表的交互

这个库允许你自定义手势与图表视图的交互的回调方法。

1、启用/禁用交互

setTouchEnabled(boolean enabled): 启用图表触摸事件setDragEnabled(boolean enabled): 启用图表拖拽事件setScaleEnabled(boolean enabled): 启用图表缩放事件setScaleXEnabled(boolean enabled): 启用X轴上的缩放setScaleYEnabled(boolean enabled):启用Y轴上的缩放setPinchZoom(boolean enabled): XY同时缩放setDoubleTapToZoomEnabled(boolean enabled): 启用双击缩放setHighlightPerDragEnabled(boolean enabled): 拖拽超过图标绘制画布时高亮显示setHighlightPerTapEnabled(boolean enabled): 双击高亮显示

2、图表的减速器

setDragDecelerationEnabled(boolean enabled):抬起之后继续滚动setDragDecelerationFrictionCoef(float coef): 减速插值,取值范围[0,1)。0表示立停止。值越大速度下降越缓慢

3、高亮方式
highlightValues(Highlight[] highs): 高亮点的集合,如果为空,全部不高亮highlightValue(int xIndex, int dataSetIndex): x轴上的数据集合高亮。如果为-1,全部不高两getHighlighted():获取高亮点的集合高亮显示使用OnChartValueSelectedListener不会生成一个回调。可以通过ChartData或DataSet对象启用和禁用高亮显示。

4、自定义高亮符号

所有的用户输入在内部被默认ChartHighlighter类处理。它可以用下面的方法自定义实现替换默认highligher:setHighlighter(ChartHighlighter highlighter): 通过继承ChartHighlighter类实现自定义高亮符号。通过setHighlighter设置点击等操作高亮显示的符号

5、选择回调

该库提供了交互后的一些后回调。其中之一是OnChartValueSelectedListener监听器,通过触摸高亮值时回调:OnChartGestureListener 这个回调可以定制手势操作相关回调
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();}

让你的需要接收回调的类实现接口,将它作为监听器设置给chart
chart.setOnChartValueSelectedListener(this);  

6、手势回调

OnChartGestureListener 这个回调可以定制手势操作相关回调

public interface OnChartGestureListener {        /**      * Callbacks when a touch-gesture has started on the chart (ACTION_DOWN)      *      * @param me      * @param lastPerformedGesture      */      void onChartGestureStart(MotionEvent me, ChartTouchListener.ChartGesture lastPerformedGesture);        /**      * Callbacks when a touch-gesture has ended on the chart (ACTION_UP, ACTION_CANCEL)      *      * @param me      * @param lastPerformedGesture      */      void onChartGestureEnd(MotionEvent me, ChartTouchListener.ChartGesture lastPerformedGesture);        /**      * 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);       /**      * Callbacks when the chart is scaled / zoomed via pinch zoom gesture.      *       * @param me      * @param scaleX scalefactor on the x-axis      * @param scaleY scalefactor on the y-axis      */      public void onChartScale(MotionEvent me, float scaleX, float scaleY);       /**     * Callbacks when the chart is moved / translated via drag gesture.     *     * @param me     * @param dX translation distance on the x-axis     * @param dY translation distance on the y-axis     */      public void onChartTranslate(MotionEvent me, float dX, float dY);  }  


 

三、轴AxisBase 

主要是AxisBase 这个类,他是XAxis 和YAxis的基类。
下面提到的方法可以应用到这两个轴。
轴类允许自定义样式和(可以包含)由以下组件/部件:
标签(在垂直(y轴)或水平(x轴)对齐),其中包含轴描述值
绘制了一个所谓的“axis-line”,在标签旁边直接绘制,与标签平行
LimitLines,允许存在特殊的信息,如边界或限制。
1、控制应该绘制哪些部分(轴)setEnabled(boolean enabled): 是否启用轴,如果禁用,关于轴的设置所有属性都将被忽略setDrawLabels(boolean enabled): 是否绘制标签setDrawAxisLine(boolean enabled): 是否绘制轴线setDrawGridLines(boolean enabled):是否和网格轴线2、修改轴的样式setTextColor(int color): 设置轴标签颜色setTextSize(float size): 设置轴标签字体大小,单位dpsetTypeface(Typeface tf): 设置轴标签字体setGridColor(int color): 设置网格颜色setGridLineWidth(float width):设置网格宽度.setAxisLineColor(int color): 设置轴线颜色setAxisLineWidth(float width): 设置轴线宽度enableGridDashedLine(float lineLength, float spaceLength, float phase): 使网格线在虚线画模式,lineLength控制线长度 , spaceLength控制线之间空格长度, phase 控制起点3、LimitLine 类两轴支持,所谓LimitLines允许显示特殊信息,如边界或限制。LimitLine在水平方向时添加到YAxis,而在垂直方向时添加到XAxis。这是如何从轴添加和删除LimitLinesaddLimitLine(LimitLine l): 在轴上添加新的 LimitLine removeLimitLine(LimitLine l): 从轴上移除 LimitLine 还有更多添加/移除可用的方法。setDrawLimitLinesBehindData(boolean enabled):允许控制LimitLines之间的z轴上的实际的数据顺序。如果设置为true,LimitLines在真实数据后边绘制,,否则在上面。默认false正如它的名字LimitLine,可以用来为用户提供额外限制的信息。例如,你的图表可能显示不同哟用户的血压测量结果。为了通知用户超过140毫米汞柱的收缩压被认为是一种健康的风险,你可以添加一个LimitLine 140提供这些信息。[java] view plain copy 在CODE上查看代码片派生到我的代码片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);  

四、X轴XAxis

XAxis是AxisBase的子类。
XAxis类(在2.0.0版本包含调用),是所有的数据和信息的容器与水平轴有关。。XAxis显示什么是交给ChartData对象作为一个ArrayList<String> 或者String[]。
XAxis类允许自定义样式和以下部分:
水平对齐标签绘制,其中包含轴描述值,为图表X轴提供的数据对象设置。
在标签旁边与标签平行绘制了一个“axis-line”。
每个在垂直方向坐标轴标签的网格线。
获取实例方法
XAxis xAxis = chart.getXAxis();  

1、自定义轴的值

setLabelsToSkip(int count): 设置应该在轴线绘制下一个标签前要跳过标签的数量。这将禁用自动计算轴标签之间的空间的功能,设置跳过由该方法提供的固定数量的标签数。调用resetLabelsToSkip(...)重新启用自动计算
resetLabelsToSkip():禁用标记被跳过的自定义的数目,自动计算轴标签之间的空间
setAvoidFirstLastClipping(boolean enabled):如果设置为true,将避免图表或屏幕的边缘的第一个和最后一个轴中的标签条目被裁剪。
setSpaceBetweenLabels(int characters):设置应该x轴标签之间的被排除在外字符,默认空间:4。
setPosition(XAxisPosition pos): x轴应该出现的位置。顶部底部都出现,顶部,底部,BOTH_SIDED,TOP_INSIDE或BOTTOM_INSIDE之间进行选择。

2、格式化值

setValueFormatter(XAxisValueFormatter formatter):在绘制之前,动态的设置自定义格式,详细信息

3、代码示例

XAxis xAxis = chart.getXAxis();  xAxis.setPosition(XAxisPosition.BOTTOM);  xAxis.setTextSize(10f);  xAxis.setTextColor(Color.RED);  xAxis.setDrawAxisLine(true);  xAxis.setDrawGridLines(false);  // set a custom value formatter  xAxis.setXValueFormatter(new MyCustomFormatter());   

五、Y轴YAxis

YAxis 是AxisBase的子类。
YAxis 类是与垂直轴相关的所有数据和信息容器,与左边右边垂直的轴相关。RadarChart 只有一个Y轴,默认情况下,图标的两个轴都启用绘制。

1、获取Y轴实例的方法

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

2、自定义轴的值

setAxisMaxValue(float max): 设置轴的最大值。如果设置,此值不会自动根据提供的数据计算。resetAxisMaxValue():撤销之前设置的最大值,将自动计算最大值。setAxisMinValue(float min): 设置轴的最小值。这样设置将不会根据提供的数据自动计算。resetAxisMinValue(): 撤销之前设置的轴最小值,将自动计算最小值setStartAtZero(boolean enabled): 已经过时- 使用setAxisMinValue(...) 或者setAxisMaxValue(...) setInverted(boolean enabled): 反转该轴,如果为true,最大值在底部,顶部是最小值。setSpaceTop(float percent): 设置轴上最高位置在表中最高位置的顶部间距,占总轴的百分比。setSpaceBottom(float percent): 设置轴上最低位置在表中最低位置的底部间距,占总轴的百分比。setShowOnlyMinMax(boolean enabled):如果启用,此轴直线式最大值和最小值架构忽略定义的标签数。setLabelCount(int count, boolean force): 设置轴的标签数目,不是精确值,如果强制设置,可能导致轴线不均匀setPosition(YAxisLabelPosition pos): 设置轴线绘制位置. Either INSIDE_CHART or OUTSIDE_CHART.setGranularity(float gran):设置Y轴最小间隔setGranularityEnabled(boolean enabled): 是否启用Y轴最小间隔必须在设置数据之前设置属性才能生效。


3、自定义标签格式

setValueFormatter(YAxisValueFormatterf): 在轴上设置一个自定义ValueFormatter。可以格式化原始标签文本,返回一个定制的文本。更多

4、zeroline

除了网格线,在水平方向Y轴的每个值,有所谓的zeroline,这是在0位置轴线上值绘制的,是类似于网格线,但可以单独配置。
// data has AxisDependency.LEFT  YAxis left = mChart.getAxisLeft();  left.setDrawLabels(false); // no axis labels  left.setDrawAxisLine(false); // no axis line  left.setDrawGridLines(false); // no grid lines  left.setDrawZeroLine(true); // draw a zero line  mChart.getAxisRight().setEnabled(false); // no right axis  





 

0 0