Android教程網
  1. 首頁
  2. Android 技術
  3. Android 手機
  4. Android 系統教程
  5. Android 游戲
 Android教程網 >> Android技術 >> 關於Android編程 >> android開源圖表庫MPAndroidChart文檔翻譯(中)

android開源圖表庫MPAndroidChart文檔翻譯(中)

編輯:關於Android編程

在 android開源圖表庫MPAndroidChart文檔翻譯(上)中,介紹了mpandroidchart的創建,回調方法,還有軸。這篇文章繼續翻譯剩余內容。文檔內容比較多,這是中篇。最後的內容在下篇做翻譯。

六、設置數據

要給圖表設置數據,調用的方法為

 

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

ChartData是渲染過程中所需圖表所有數據和信息的基類。對於每種圖表,有不同的子類用來設置特定圖表的數據。例如LineData。可以用ArrayList作為展示數據,String類型的數組描述X軸標簽。例如LineData用於將數據添加到線性圖表。

 

 

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

那麼,什麼事DataSet 呢?我們為什麼需要它呢?很簡單,每一個DataSet對象代表一組屬於一個表的數據記錄,它用來分離不同組的邏輯值,每種類型的圖表對應不同DataSet的子類,對應不同樣式。

 

例如,你可能想在LineChart中想展示兩家公司一年的季度收入。這種情況,建議使用兩個不同的LineDataSet對象,每個包含四個值(一年四個季度),使用ArrayList描述X軸上的標簽,只需要簡單數據源 "1.Q", "2.Q", "3.Q", "4.Q"。
當然,使用一個LineDataSet對象,包含這兩個公司的8個值也是可以的。
初始化LineDataSet對象

 

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

通過構造方法可以發現,LinedDataSet需要一個Entry類型的ArrayList和一個字符串作為LineDtaSet的描述。此外,這個標簽可以用來找到LineData對象中的LineDataSet對象集合

 

Entry類型的ArrayList包含了表中的所有值,一個Entry對象包含了x軸的位置,和它對應的值。

 

    public Entry(float val, int xIndex) { ... }
全部放在一起(超過一年的兩家公司的季度收入例子):
首先,創建Entry類型的list,來保存值
    ArrayList valsComp1 = new ArrayList();
    ArrayList valsComp2 = new ArrayList();
然後,填充這些Enty對象值。確保對應對象包含正確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對象的list,可以創建LineDataSet對象了

 

 

 LineDataSet setComp1 = new LineDataSet(valsComp1, "Company 1");
 setComp1.setAxisDependency(AxisDependency.LEFT);
 LineDataSet setComp2 = new LineDataSet(valsComp2, "Company 2");
 setComp2.setAxisDependency(AxisDependency.LEFT);
通過調用setAxisDependency,DataSet軸中應該對指定繪制,最後異步,但是重要,我們創建IDataSets 列表和x軸條目列表,並建立我們的ChartData對象:

 

 

  // use the interface ILineDataSet
    ArrayList dataSets = new ArrayList();
    dataSets.add(setComp1);
    dataSets.add(setComp2);

    ArrayList xVals = new ArrayList();
    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之後,表會刷新,提供的數據會重繪

 

 

七、設置顏色

自發布V1.4.0之後,早期版本ColorTemplate對象不再需要,ColorTemplate負責在以前的版本設置顏色。盡管如此,它仍持有所有預定義的色彩陣列(例如ColorTemplate.VORDIPLOM_COLORS並提供從資源(資源整數)到“真正的”色色轉換方便的方法。
代替ColorTemplate,顏色現在可以直接通過數據集對象設置,這允許每個數據集單獨造型指定。
例如,我們有一個代表兩個公司(以前在設置數據教程中提到的),為此,我們現在要設置不同的顏色的季度收入我們的兩個不同的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);
setColors(int [] colors, Context c): 通過color資源id設置顏色
setColors(int [] colors):通過真實色值的數組來設置顏色
setColors(ArrayList colors)通過真實色值的list來設置顏色
setColor(int color): 設置為同一個顏色
ColorTemplate 的例子:

 

 

LineDataSet set = new LineDataSet(...);
set.setColors(ColorTemplate.VORDIPLOM_COLORS);
沒有設置顏色,使用默認值。

 

八、值的格式化接口ValueFormatter

 

從1.6.2版本可用,在2.1.4版本做出修改。
ValueFormatter接口可以用來指定繪制的格式

 

ublic class MyValueFormatter implements ValueFormatter {

    private DecimalFormat mFormat;

    public MyValueFormatter() {
        mFormat = new DecimalFormat("###,###,##0.0"); // use one decimal
    }

    @Override
    public String getFormattedValue(float value, Entry entry, int dataSetIndex, ViewPortHandler viewPortHandler) {
        // write your logic here
        return mFormat.format(value) + " $"; // e.g. append a dollar-sign
    }
}
使用

 

 

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

// usage on individual dataset object
lineDataSet.setValueFormatter(new MyValueFormatter());
預定義的格式

 

LargeValueFormatter: 用於較大值得轉換,如1000轉換成1k,不支持小數點。
PercentFormatter:使用百分號,在餅狀圖中特別有用
StackedValueFormatter: 在 BarChart中使用. 它允許指定所有的堆棧值是否應繪制,或者是最高值

九、X軸上的格式化接口XAxisValueFormatter

2.1.4版本之後可用。
XAxisValueFormatter接口可以動態調整X值得顯示方式。

 

 

public class MyCustomXAxisValueFormatter implements XAxisValueFormatter {

    @Override
    public String getXValue(String original, int index, ViewPortHandler viewPortHandler) {
        // original is the original value to use, x-index is the index in your x-values array
        // implement your logic here ...
        return ...;
    }
}

使用

 

 

// usage on XAxis, get axis instance:
XAxis xAxis = chart.getXAxis();

// set the formatter
xAxis.setValueFormatter(new MyCustomXAxisValueFormatter());

預定義格式轉換DefaultXAxisValueFormatter

 

自定義格式轉換MyCustomXValueFormatter

 

十、Y軸上的格式化接口YAxisValueFormatter

與XAxisValueFormatter類似

 

 

public class MyYAxisValueFormatter implements YAxisValueFormatter {

    private DecimalFormat mFormat;

    public MyYAxisValueFormatter () {
        mFormat = new DecimalFormat("###,###,##0.0"); // use one decimal
    }

    @Override
    public String getFormattedValue(float value, YAxis yAxis) {
        // write your logic here
        // access the YAxis object to get more information
        return mFormat.format(value) + " $"; // e.g. append a dollar-sign
    }
}
設置

 

 

// get an instance of the YAxis (e.g. left axis)
YAxis leftAxis = chart.getAxisLeft();
leftAxis.setValueFormatter(new MyYAxisValueFormatter());

 

十一、具體圖表的設置

 

Line-, Bar-, Scatter-, Candle- & BubbleChart

折線圖,條形表,散點圖,K線圖,氣泡圖

setAutoScaleMinMaxEnabled(boolean enabled): 指示是否啟用在y軸自動縮放。如果啟用,當視角變換時,Y軸自動調整到和當前的X軸范圍適應的最小值,默認值false
setKeepPositionOnRotation(boolean enabled): 伸縮之後是否能還原到原來的位置. 默認值false

BarChart條形圖

setDrawValueAboveBar(boolean enabled): 如果設置為true,在條形圖上方顯示值。如果為false,會顯示在頂部下方。
setDrawBarShadow(boolean enabled): 是否顯示陰影。啟動它會降低約40%的性能
setDrawValuesForWholeStack(boolean enabled): 如果設置為true,堆疊條形的所有值會分別繪制,而不僅僅是他們所有的頂部總和。
setDrawHighlightArrow(boolean enabled): 是否強調繪制箭頭

PieChart餅狀圖

setDrawSliceText(boolean enabled): 設置為true,x軸文字會繪制為扇形
setUsePercentValues(boolean enabled): 如果啟用,圖表內值以百分比繪制。
setCenterText(SpannableString text): 設置中心文本,較長的文字會被調整,避免剪裁
setCenterTextRadiusPercent(float percent): 文本中心邊框的矩形半徑,默認1.0f
setHoleRadius(float percent): 設置在餅圖中心的最大半徑。默認50%
setTransparentCircleRadius(float percent): setTransparentCircleAlpha(int alpha): 設置透明度,0-255
setMaxAngle(float maxangle):設置最大角度,默認360f

RadarChart雷達圖

setSkipWebLineCount(int count): 允許跳過圖表中心網狀線,如果有很多行駛很有用的

 

 

十二、圖例

默認情況下,所有圖表都會自動生成圖例。圖例通常由一個標簽的形式來表示每一個條目 自動生成的圖例包含條目的數量取決於不同顏色的數量以及關於數據集的標簽。如果多種顏色用於一個數據集,這些顏色只屬於一個標簽。定制圖例首先要獲取圖例
Legend legend = chart.getLegend();

設置圖例是否被繪制
setEnabled(boolean enabled)

設置圖例顏色、位置、標簽、字體
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

    // set custom labels and colors
    l.setCustom(ColorTemplate.VORDIPLOM_COLORS, new String[] { "Set1", "Set2", "Set3", "Set4", "Set5" });

    // and many more...

十三、動態修改數據

為了動態增加新數據或者刪除數據,需要有多種方法來增加或者刪除實體對象。
  DataSet 類和它的所有子類
addEntry(Entry e):增加新的Entry對象
ChartData 類和它的所有子類
addEntry(Entry e, int dataSetIndex): 在datasetindex這個位置添加新的Entry對象
addDataSet(DataSet d): 在現有的CharData上增加新的DataSet
刪除操作
Class DataSet:
public boolean removeFirst()
public boolean removeLast()
public boolean removeEntry(Entry e)
public boolean removeEntry(int xIndex)
Class ChartData:
public boolean removeEntry(Entry e, int dataSetIndex)
public boolean removeEntry(int xIndex, int dataSetIndex)
public boolean removeDataSet(DataSet d)
public boolean removeDataSet(int index) 注意,在動態修改數據之後,一定要在刷新之前調用notifyDataSetChanged()
moveViewTo(...)方法會自動調用刷新方法 invalidate().

 

 

 // EXAMPLE 1
 // add entries to the "data" object
 exampleData.addEntry(...);
 chart.notifyDataSetChanged(); // let the chart know it's data changed
 chart.invalidate(); // refresh

 // EXAMPLE 2
 // add entries to "dataSet" object
 dataSet.addEntry(...);
 exampleData.notifyDataChanged(); // let the data know a dataSet changed
 chart.notifyDataSetChanged(); // let the chart know it's data changed
 chart.invalidate(); // refresh

 

示例

DynamicalAddingActivity
RealtimeDataActivity

十四、修改視圖窗口

這個庫有多種修改視圖方法,需要注意的是,這些方法只適用於LineChart, BarChart, ScatterChart and CandleStickChart。
下面提到的方法是Chart類提供的方法,另一種方法是通過ViewPortHandler直接訪問,但是這種方法只推薦熟悉API的高級用戶使用。

請注意,所有修改視方法都需要設定數據後才能被圖表被調用。

限制可見性
setVisibleXRangeMaximum(float maxXRange): 設置X軸上可見區域的最大值。
setVisibleXRangeMinimum(float minXRange):設置X軸上可見的最小值,限制最小縮放。
setVisibleYRangeMaximum(float maxYRange, AxisDependency axis): 設置Y軸可見的最大值。
setViewPortOffsets(float left, float top, float right, float bottom): 設置視圖偏移量,影響自動偏移量,使用resetViewPortOffsets()方法撤銷操作
etExtraOffsets(float left, float top, float right, float bottom):設置額外的偏移量,這樣做不會改變自動偏移量

移動視圖
fitScreen(): 充滿邊界
moveViewToX(float xValue):移動到X軸固定位置
moveViewTo(float xValue, float yValue, AxisDependency axis): 移動到X,Y軸固定位置
移動動畫設置
moveViewToAnimated(float xValue, float yValue, AxisDependency axis, long duration)
centerViewToAnimated(float xValue, float yValue, AxisDependency axis, long duration)
注意:所有的moveViewTo方法都會自動刷新視圖,不需要調用invalidate()方法
縮放
zoomIn()
zoomOut():
zoom(float scaleX, float scaleY, float x, float y):
zoom(float scaleX, float scaleY, float xValue, float yValue, AxisDependency axis):
縮放動畫
zoomAndCenterAnimated(float scaleX, float scaleY, float xValue, float yValue, AxisDependency axis, long duration):

 

chart.setData(...); // first set data

// now modify viewport
chart.setVisibleXRangeMaximum(20); // allow 20 values to be displayed at once on the x-axis, not more
chart.moveViewToX(10); // set the left edge of the chart to x-index 10
// moveViewToX(...) also calls invalidate()

 

十五、動畫設置

注意:圖表的動畫只對API級別11(的Android3.0.x中)及更高版本才支持。低版本不會執行,也不會崩潰。 分別在X軸和Y軸應用動畫 動畫代碼示例
mChart.animateX(3000); // animate horizontal 3000 milliseconds
// or:
mChart.animateY(3000); // animate vertical 3000 milliseconds
// or:
mChart.animateXY(3000, 3000); // animate horizontal and vertical 3000 milliseconds
如果調用那個了animate(...) 方法, 不需要調用 invalidate() 就可以刷新圖表
動畫設置
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,
  }
使用方法
 public void animateY(int durationmillis, EasingFunction function); 
自定義動畫設置實現接口
 /**
  * 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);
  }

十六、MarkerView(浮層)

繼承MarkerView ,實現自定義彈出浮層。
調用setMarkerView(MarkerView mv)方法設置浮層
getMarkerView()獲取浮層

 

 

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, Highlight highlight) {
        tvContent.setText("" + e.getVal()); // set the entry-value as the display text
    }

    @Override
    public int getXOffset(float xpos) {
        // this will center the marker-view horizontally
        return -(getWidth() / 2);
    }

    @Override
    public int getYOffset(float ypos) {
        // this will cause the marker-view to be above the selected value
        return -getHeight();
    }
}
使用
CustomMarkerView mv = new CustomMarkerView(Context, R.layout.custom_marker_view_layout);

// set the marker to the chart
chart.setMarkerView(mv);


 

 

 

  1. 上一頁:
  2. 下一頁:
熱門文章
閱讀排行版
Copyright © Android教程網 All Rights Reserved