1. 程式人生 > >基於MPAndroidChart庫製作K線圖(二) —— 自定義x、y軸

基於MPAndroidChart庫製作K線圖(二) —— 自定義x、y軸

目錄
基於MPAndroidChart庫製作K線圖(一) ­­­­­­­­­­­­—— 基礎圖
基於MPAndroidChart庫製作K線圖(二) ­­­­­­­­­­­­—— 自定義x、y軸
基於MPAndroidChart庫製作K線圖(三) ­­­­­­­­­­­­—— 手勢高亮聯動


一、效果圖

二、針對x軸的標籤進行自定義
可以看一下x軸的渲染器XAxisRenderer的原始碼,其中在繪製標籤方法drawLabels()中可以發現所有的標籤是居中顯示在x軸的軸線上,而我需要的做的是將最左邊的標籤在螢幕靠右完整顯示,最右邊的標籤在螢幕靠左完整顯示,其餘標籤保持原來的不變。

繼承XAxisRenderer重寫drawLabels()方法

@Override
protected void drawLabels(Canvas c, float pos, MPPointF anchor) {
    final float labelRotationAngleDegrees = mXAxis.getLabelRotationAngle();
    boolean centeringEnabled = mXAxis.isCenterAxisLabelsEnabled();

    float[] positions = new float[mXAxis.mEntryCount * 2
]; for (int i = 0; i < positions.length; i += 2) { // only fill x values if (centeringEnabled) { positions[i] = mXAxis.mCenteredEntries[i / 2]; } else { positions[i] = mXAxis.mEntries[i / 2]; } } mTrans.pointValuesToPixel(positions); for
(int i = 0; i < positions.length; i += 2) { float x = positions[i]; if (mViewPortHandler.isInBoundsX(x)) { String label = mXAxis.getValueFormatter().getFormattedValue(mXAxis.mEntries[i / 2], mXAxis); if (mXAxis.isAvoidFirstLastClippingEnabled()) { // avoid clipping of the last float width = Utils.calcTextWidth(mAxisLabelPaint, label); if (i == mXAxis.mEntryCount * 2 - 2 && mXAxis.mEntryCount > 1) { x -= width / 2 + interval; // avoid clipping of the first } else if (i == 0) { x += width / 2 + interval; } } drawLabel(c, label, x, pos, anchor, labelRotationAngleDegrees); } } }

只修改了25行和28行 ,使第一個標籤向右偏移一個距離、最後一個標籤向左偏移一個距離;
然後將渲染器設定給CombinedChart

Transformer trans = ccKl.getTransformer(YAxis.AxisDependency.LEFT);
//自定義X軸標籤位置
ccKl.setXAxisRenderer(new InBoundXAxisRenderer(ccKl.getViewPortHandler(), ccKl.getXAxis(), trans, 10));

然後就是設定x軸的顯示的文字,通過setValueFormatter()方法可以自定義x軸顯示的文字格式,如果不設定或者取不到x座標值時不能返回null否則會空指標,返回空字串即可。

xac.setValueFormatter(new IAxisValueFormatter() {
    @Override
      public String getFormattedValue(float value, AxisBase axis) {
          int v = (int) value;
          if (!xValues.containsKey(v) && xValues.containsKey(v - 1)) {
              v = v - 1;
          }
          String x = xValues.get(v);
          return TextUtils.isEmpty(x) ? "" : x;
      }
});

三、針對y軸的標籤進行自定義
y軸的渲染器YAxisRenderer,同理繼承YAxisRenderer重寫drawYLabels()方法,使y軸最上面的標籤處於刻度下方,最下面的標籤處於刻度上方

@Override
protected void drawYLabels(Canvas c, float fixedPosition, float[] positions, float offset) {
    final int from = mYAxis.isDrawBottomYLabelEntryEnabled() ? 0 : 1;
    final int to = mYAxis.isDrawTopYLabelEntryEnabled() ? mYAxis.mEntryCount : (mYAxis.mEntryCount - 1);

    int labelHeight = Utils.calcTextHeight(mAxisLabelPaint, "A");
    for (int i = from; i < to; i++) {
        String text = mYAxis.getFormattedLabel(i);
        float os = i == mYAxis.mEntryCount - 1 ? -0.9F * labelHeight : 0.7F * labelHeight;
        c.drawText(text, fixedPosition, positions[i * 2 + 1] + offset - os, mAxisLabelPaint);
    }
}

然後將渲染器設定給CombinedChart

//自定義Y軸標籤位置
ccKl.setRendererLeftYAxis(new InBoundYAxisRenderer(ccKl.getViewPortHandler(), ccKl.getAxisLeft(), trans));

四、原始碼下載

github: https://github.com/xkdaq/KoinChart
coding: https://coding.net/u/xkdaq/p/KoinChart/git