MPAndroidChart图形联动

简介: MPAndroidChart图形联动 本篇基于博客MPAndroidChart的K线图上添加均线,两个MPAndroidChart是有联动效果的原理 获取正在滑动的C...

MPAndroidChart图形联动

本篇基于博客MPAndroidChart的K线图上添加均线,两个MPAndroidChart是有联动效果的

原理

获取正在滑动的Chart的触摸事件,将事件同步给想要联动的Chart

实现

添加事件处理的类

package ……;

import android.graphics.Matrix;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;

import com.github.mikephil.charting.charts.BarLineChartBase;
import com.github.mikephil.charting.charts.Chart;
import com.github.mikephil.charting.highlight.Highlight;
import com.github.mikephil.charting.listener.ChartTouchListener;
import com.github.mikephil.charting.listener.OnChartGestureListener;

/**
 * Created by Android on 2015/12/10.
 */
public class CoupleChartGestureListener  implements OnChartGestureListener {

    private Chart srcChart;
    private Chart[] dstCharts;


    public CoupleChartGestureListener(Chart srcChart, Chart[] dstCharts) {
        this.srcChart = srcChart;
        this.dstCharts = dstCharts;
    }

    @Override
    public void onChartGestureStart(MotionEvent me, ChartTouchListener.ChartGesture lastPerformedGesture) {

    }

    @Override
    public void onChartGestureEnd(MotionEvent me, ChartTouchListener.ChartGesture lastPerformedGesture) {

    }

    @Override
    public void onChartLongPressed(MotionEvent me) {

    }

    @Override
    public void onChartDoubleTapped(MotionEvent me) {

    }

    @Override
    public void onChartSingleTapped(MotionEvent me) {
        for (Chart dstChart : dstCharts) {
            if (dstChart.getVisibility() == View.VISIBLE) {
                Highlight h = ((BarLineChartBase)dstChart).getHighlightByTouchPoint(me.getX(), me.getY());
                ((BarLineChartBase)dstChart).highlightTouch(h);
            }
        }
    }

    @Override
    public void onChartFling(MotionEvent me1, MotionEvent me2, float velocityX, float velocityY) {

    }

    @Override
    public void onChartScale(MotionEvent me, float scaleX, float scaleY) {
        syncCharts();

    }

    @Override
    public void onChartTranslate(MotionEvent me, float dX, float dY) {
        syncCharts();

    }

    public void syncCharts() {
        Matrix srcMatrix;
        float[] srcVals = new float[9];
        Matrix dstMatrix;
        float[] dstVals = new float[9];

        // get src chart translation matrix:
        srcMatrix = srcChart.getViewPortHandler().getMatrixTouch();
        srcMatrix.getValues(srcVals);

        // apply X axis scaling and position to dst charts:
        for (Chart dstChart : dstCharts) {
            if (dstChart.getVisibility() == View.VISIBLE) {
                dstMatrix = dstChart.getViewPortHandler().getMatrixTouch();
                dstMatrix.getValues(dstVals);
                dstVals[Matrix.MSCALE_X] = srcVals[Matrix.MSCALE_X];
                dstVals[Matrix.MTRANS_X] = srcVals[Matrix.MTRANS_X];
                dstMatrix.setValues(dstVals);
                dstChart.getViewPortHandler().refresh(dstMatrix, dstChart, true);
            }
        }
    }
}

事件传递

// 获取K线控件
KLineChart mKLine = (KLineChart) findViewById(R.id.kLineView);
// 获取交易量控件
TradingVolumeChart mTradingVolumeView = (TradingVolumeChart) findViewById(R.id.tradingVolumeView);
// 将K线控的滑动事件传递给交易量控件
mKLine.setOnChartGestureListener(new CoupleChartGestureListener(mKLine, new Chart[]{mTradingVolumeView}));
// 将交易量控件的滑动事件传递给K线控件
mTradingVolumeView.setOnChartGestureListener(new CoupleChartGestureListener(mTradingVolumeView, new Chart[]{mKLine}));
相关文章
|
1月前
|
数据可视化
宜搭dataV的ECHART图形控件加载数据源,怎样设置才能够实现两个曲线对比分析
宜搭dataV的ECHART图形控件加载数据源,怎样设置才能够实现两个曲线对比分析
|
11月前
|
前端开发 定位技术
Echarts地图高级开发:下钻交互菜单操作按钮(1)
Echarts地图高级开发:下钻交互菜单操作按钮(1)
85 0
|
1月前
|
数据可视化 定位技术 数据格式
Tableau可视化设计案例-07 多边形地图和背景图地图
Tableau可视化设计案例-07 多边形地图和背景图地图
|
11月前
|
Web App开发 数据可视化 JavaScript
漏刻有时数据可视化Echarts组件开发(23):世界地图动态时间轴的散点气泡图
漏刻有时数据可视化Echarts组件开发(23):世界地图动态时间轴的散点气泡图
150 0
|
11月前
|
数据可视化 定位技术
svg地图数据可视化鼠标操作事件函数
svg地图数据可视化鼠标操作事件函数
76 0
|
数据可视化 数据挖掘
常用 7 大类型图形可视化——群体关系图形
常用 7 大类型图形可视化——群体关系图形
109 0
|
数据可视化 定位技术
GIS开发:客户端控制的地图样式
GIS开发:客户端控制的地图样式
|
前端开发 数据可视化
基于canvas的粒子酷炫效果,可用作可视化大屏的背景展示,即拿即用......
基于canvas的粒子酷炫效果,可用作可视化大屏的背景展示,即拿即用......
105 0
|
数据可视化 JavaScript 前端开发
前端可视化大屏设置全屏模式方法
前端可视化大屏设置全屏模式方法
前端可视化大屏设置全屏模式方法
|
移动开发 JSON 前端开发
拓扑/大屏/三维编辑器的设计与思考
拓扑/大屏/三维编辑器的设计与思考
拓扑/大屏/三维编辑器的设计与思考