XYMultipleSeriesRenderer 绘制K线图，点击弹出pop

最新推荐文章于 2021-05-27 00:22:13 发布
最新推荐文章于 2021-05-27 00:22:13 发布
阅读量3.2k 收藏 4
点赞数 3
分类专栏： android 文章标签： achartengine
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/yaohucaizi/article/details/9055173
版权

本文是讲述如何使用XYMultipleSeriesRenderer绘制K线图，并且点击弹出pop的实例，由于是从项目中摘出来的，所有只有主要代码并不是完成能够直接运行的程序。

依赖包下载：achartengine-1.0.0.jar    下载链接

首先：绘制K线图，并设置其相关属性  

变量：

    private LinearLayout containerbody;
    private GraphicalView mLineChartView;
    private PopupWindow mPopupWindow;
    private PopupWindow mPopupWindow1;
    private PopupWindow popWin;
    private View mPopupView;
    private View mPopupView1;
    private TextView mPopTxt1;
    private TextView mPopTxt2;
    private TextView mPopTxt3;
    private TextView mPopTxt4;

    private XYSeries series;
    private final int CHART_MARGINS_LEFT = 20;
    private final int CHART_MARGINS_TOP = 30;
    private final int CHART_MARGINS_RIGHT = 20;
//    private final int CHART_MARGINS_BOTTOM = 0;
    private int chart_margins_bottom;
    private final int CHART_X_LABELS = 9;
    private final int CHART_Y_LABELS = 6;
    private final int CHART_X_AXISMAX = CHART_X_LABELS + 1;
    private final int CHART_Y_AXISMAX = CHART_Y_LABELS * 10;
    private int panXLimit;
    private int lineEndX;
    private int mEventStartX;
//    private int mEventStartY;
    private int mEventEndX;
    private int mEventEndY;
    private int mScreenOffsetX = 0;
//    private int mScreenOffsetY = 0;
    private int POPWIN_WIDTH ;
    private int POPWIN_HEIGHT;
    private int POPWIN_WIDTH1 ;
    private int POPWIN_HEIGHT1;

initChartView: 

private void initChartView()
 {
  System.out.println("initChartView here !");
  // 1, 构造显示用渲染图
  XYMultipleSeriesRenderer renderer = new XYMultipleSeriesRenderer();
//  renderer.setPointSize(5);
  // 2,进行显示
  XYMultipleSeriesDataset dataset = new XYMultipleSeriesDataset();
  // 2.1, 构建数据
  series = new XYSeries("业绩曲线");
  // 填充数据
  System.out.println("initChartView here !lineEndX = " + lineEndX);
  for (int x = 0; x < lineEndX; x++)
  {
   // 填x,y值
   mDataMap = mDataMapList.get(x);
   // X轴从1开始，所以x+1
   series.add(x + 1, Integer.parseInt(mDataMap.get("BUSTOTAL")));
//   series.add(x + 1, (int) Math.abs(Math.random() * CHART_Y_AXISMAX));
   System.out.println("x = " + (x + 1) + " | y = " + Integer.parseInt(mDataMap.get("BUSTOTAL")));
  }
  // 需要绘制的点放进dataset中
  dataset.addSeries(series);

  // 3, 对点的绘制进行设置
  XYSeriesRenderer xyRenderer = new XYSeriesRenderer();
  // 3.1设置K 线颜色
  xyRenderer.setColor(Color.RED);
  // 3.2设置点的样式
  xyRenderer.setPointStyle(PointStyle.CIRCLE);
  xyRenderer.setFillPoints(true);
  //设置线的宽度
  xyRenderer.setLineWidth(3);
  // 3.3, 将要绘制的点添加到坐标绘制中
  renderer.addSeriesRenderer(xyRenderer);

  // 4, 设置图表属性
  // 显示网格
  renderer.setShowGrid(true);
  // 设置4周边距
  chart_margins_bottom = (int) getResources().getDimension(R.dimen.chart_margin_bottom);
  renderer.setMargins(new int[] { CHART_MARGINS_TOP, CHART_MARGINS_LEFT, chart_margins_bottom, CHART_MARGINS_RIGHT });
  // 边框外侧颜色
//  renderer.setMarginsColor(Color.argb(0, 0xff, 0, 0)); // 穿透背景色
  renderer.setMarginsColor(Color.WHITE);
  // 设置背景颜色
  renderer.setBackgroundColor(Color.TRANSPARENT);
  // 设置背景颜色生效
  renderer.setApplyBackgroundColor(true);
  // 是否支持图表移动
  renderer.setPanEnabled(true, false);
  // 坐标滑动上、下限
  renderer.setPanLimits(new double[]{1, panXLimit, 0, 100});
  // 是否支持图表缩放
  renderer.setZoomEnabled(false, false);
  // X轴等分，最小、最大坐标值
  renderer.setXLabels(CHART_X_LABELS);
  renderer.setXAxisMin(1);
  renderer.setXAxisMax(CHART_X_AXISMAX);
  // Y轴等分，最小、最大坐标值
  renderer.setYLabels(CHART_Y_LABELS);
  renderer.setYAxisMin(0);
  renderer.setYAxisMax(CHART_Y_AXISMAX);
  
  // 坐标轴颜色
  renderer.setAxesColor(Color.rgb(242, 103, 16));
  // 坐标轴单位文字颜色、字号
  renderer.setLabelsColor(Color.rgb(25, 110, 172));
  renderer.setLabelsTextSize(16);
  // 坐标轴文字对齐
  renderer.setYLabelsAlign(Paint.Align.RIGHT);
  //设置原点大小
  renderer.setPointSize(5);
  // 设置图表标题文字
//  renderer.setChartTitle(getString(R.string.chart_title));
  // 是否显示图例
  renderer.setShowLegend(false);

  // 生成图表视图
  mLineChartView = ChartFactory.getLineChartView(ShowChartActivity.this, dataset, renderer);
  mLineChartView.setOnTouchListener(chartViewOnTouchListener);
  mLineChartView.setId(0);

  // 添加至父容器
  containerbody = (LinearLayout) findViewById(R.id.container_chart);
  containerbody.addView(mLineChartView, new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT));
//  firstShowChart();
 }

2、监听其onTouch事件：其中，弹出pop窗口是根据项目需要弹出蓝色向左、蓝色向右、绿色向左、绿色向右四种pop. 

private OnTouchListener chartViewOnTouchListener = new OnTouchListener()
 {
  @Override
  public boolean onTouch(View v, MotionEvent event)
  {
   // TODO Auto-generated method stub
   dismissPopupWindow();
   
   switch (event.getAction())
   {
   case MotionEvent.ACTION_DOWN:
    mEventStartX = (int) event.getX();
//    mEventStartY = (int) event.getY();
    break;
   case MotionEvent.ACTION_UP:
    // *图表点击坐标
    mEventEndX = (int) event.getX();
    mEventEndY = (int) event.getY();
    System.out.println("1.------------------------------");
    // 屏幕是否位移
    mScreenOffsetX += mEventEndX - mEventStartX == 0 ? 0 : mEventEndX - mEventStartX;
    // 是否超出X轴原点（是，归0）
    mScreenOffsetX = mScreenOffsetX > 0 ? 0 : mScreenOffsetX;
    System.out.println("############ mOffsetX = " + mScreenOffsetX);

    if (event.getX() < CHART_MARGINS_LEFT || event.getX() > containerbody.getRight() - CHART_MARGINS_LEFT || event.getY() < CHART_MARGINS_TOP
            || event.getY() > containerbody.getBottom() - CHART_MARGINS_TOP)
    {
     // out of the chartView, do nothing.
    }
    else
    {
     // 取屏幕宽、高
     int screenWidth = getWindowManager().getDefaultDisplay().getWidth();
     int screenHeight = getWindowManager().getDefaultDisplay().getHeight();
     // 取图表区域宽、高
     int chartViewWidth = mLineChartView.getWidth();
     int chartViewHeight = mLineChartView.getHeight();
     // 求图表单元格宽、高
     int chartCellWidth = (chartViewWidth - CHART_MARGINS_LEFT * 2) / CHART_X_LABELS;
     int chartCellHeight = (chartViewHeight - CHART_MARGINS_TOP - chart_margins_bottom) / CHART_Y_LABELS;
     // 是否超出X轴上限（是，取上限值）
     mScreenOffsetX = mScreenOffsetX < -chartCellWidth * (panXLimit - CHART_X_AXISMAX) ? -chartCellWidth * (panXLimit - CHART_X_AXISMAX)
             : mScreenOffsetX;
     System.out.println("-chartCellWidth * panXLimit = " + -chartCellWidth * (panXLimit - CHART_X_AXISMAX));
     System.out.println("@@@@mScreenOffsetX = " + mScreenOffsetX);
     // *求图表像素坐标 换算成图表单位坐标
     int chartEventX = 1 + Math.round((mEventEndX - CHART_MARGINS_LEFT) / chartCellWidth);
     int chartEventY = CHART_Y_AXISMAX - Math.round((mEventEndY - CHART_MARGINS_TOP) / chartCellHeight * 10);
     System.out.println("chartEventX = " + chartEventX);
     System.out.println("chartEventY = " + chartEventY);
     // 求位移单元格
     int chartOffsetX = Math.round(mScreenOffsetX / chartCellWidth);
     System.out.println("############ chartOffsetX = " + chartOffsetX);
     System.out.println("2.================================");
     // 求图表像素坐标 换算成屏幕像素坐标     
     int screenEventX = mEventEndX + (screenWidth - chartViewWidth) / 2;
     int screenEventY = mEventEndY + (screenHeight - chartViewHeight) / 2;
//     System.out.println("chartEventX = " + event.getX());
//     System.out.println("chartEventY = " + event.getY());
//     System.out.println("screenEventX = " + screenEventX);
//     System.out.println("screenEventY = " + screenEventY);

     boolean mType = true;
     isShowPopWin: for (int i = 0; i < lineEndX; i++)
     {
      int pxSeriesX = ((int) (series.getX(i)) - 1) * chartCellWidth + CHART_MARGINS_LEFT;
      int pxSeriesY = (CHART_Y_AXISMAX - (int) (series.getY(i))) * chartCellHeight / 10 + CHART_MARGINS_TOP;
      System.out.println("3.**********************************");
//      System.out.println(" mEventEndX = " + mEventEndX);
//      System.out.println(" pxSeriesX + mScreenOffsetX - chartCellWidth / 2 = " + (pxSeriesX + mScreenOffsetX - chartCellWidth / 2));
//      System.out.println(" pxSeriesX + mScreenOffsetX + chartCellWidth / 2 = " + (pxSeriesX + mScreenOffsetX + chartCellWidth / 2));
//      System.out.println(" mEventEndY = " + mEventEndY);
//      System.out.println(" pxSeriesY - chartCellHeight / 2 = " + (pxSeriesY - chartCellHeight / 2));
//      System.out.println(" pxSeriesY + chartCellHeight / 2 = " + (pxSeriesY + chartCellHeight / 2));
      
      if (mEventEndX > pxSeriesX + mScreenOffsetX - chartCellWidth / 2 && mEventEndX < pxSeriesX + mScreenOffsetX + chartCellWidth / 2
              && mEventEndY > pxSeriesY - chartCellHeight / 2 && mEventEndY < pxSeriesY + chartCellHeight / 2)
      {
       System.out.println(" series.getX(i) = " + series.getX(i));
       System.out.println(" pxSeriesX = " + pxSeriesX);

       
       mDataMap = mDataMapList.get(i);
       String bustotal = mDataMap.get("BUSTOTAL").toString();
       String busunsuccess = mDataMap.get("BUSUNSUCCESS").toString();
       touchPoint = i;
       // 根据type，判断窗口绿or蓝
       if("0".equals(mDataMap.get("type").toString()))
       {
        mType = false;
        mPopTxt1.setText("预约" + bustotal + "条");
        mPopTxt2.setText(busunsuccess + "条");
       }
       else
       {
        mType = true;
        mPopTxt4.setText("已办理" + bustotal + "条");
       }
       if (screenWidth - screenEventX < POPWIN_WIDTH)
       {
        mPopupView.setBackgroundDrawable(getResources().getDrawable(R.drawable.blue_pop_right));
        mPopupView.setPadding(0, dip2px(ShowChartActivity.this, 30), dip2px(ShowChartActivity.this, 23), 0);
        mPopTxt1.setGravity(Gravity.RIGHT);
        mPopTxt2.setGravity(Gravity.RIGHT);
        mPopTxt3.setGravity(Gravity.RIGHT);

        mPopupView1.setBackgroundDrawable(getResources().getDrawable(R.drawable.green_pop_right));
        mPopupView1.setPadding(0, dip2px(ShowChartActivity.this, 30), dip2px(ShowChartActivity.this, 23), 0);
        mPopTxt4.setGravity(Gravity.RIGHT);

        screenEventX -= POPWIN_WIDTH;
       }
       else
       {
        mPopupView.setBackgroundDrawable(getResources().getDrawable(R.drawable.blue_pop_left));
        mPopupView.setPadding(dip2px(ShowChartActivity.this, 23), dip2px(ShowChartActivity.this, 30), 0, 0);
        mPopTxt1.setGravity(Gravity.LEFT);
        mPopTxt2.setGravity(Gravity.LEFT);
        mPopTxt3.setGravity(Gravity.LEFT);

        mPopupView1.setBackgroundDrawable(getResources().getDrawable(R.drawable.green_pop_left));
        mPopupView1.setPadding(dip2px(ShowChartActivity.this, 20), dip2px(ShowChartActivity.this, 30), 0, 0);
        mPopTxt4.setGravity(Gravity.LEFT);
       }

       mPopupWindow = new PopupWindow(mPopupView, POPWIN_WIDTH, POPWIN_HEIGHT);
       mPopupWindow1 = new PopupWindow(mPopupView1, POPWIN_WIDTH1, POPWIN_HEIGHT1);
       if(mType)
       {
        if (mPopupWindow1.isShowing())
        {
         mPopupWindow1.update(screenEventX, screenEventY + POPWIN_HEIGHT / 3, POPWIN_WIDTH, POPWIN_HEIGHT);
        }
        else
        {
         mPopupWindow1.showAtLocation(mLineChartView, Gravity.NO_GRAVITY, screenEventX, screenEventY + POPWIN_HEIGHT / 3);
        }
       }
       else
       {
        if (mPopupWindow.isShowing())
        {
         mPopupWindow.update(screenEventX, screenEventY + POPWIN_HEIGHT / 3, POPWIN_WIDTH, POPWIN_HEIGHT);
        }
        else
        {
         mPopupWindow.showAtLocation(mLineChartView, Gravity.NO_GRAVITY, screenEventX, screenEventY + POPWIN_HEIGHT / 3);
        }
       }

       break isShowPopWin;
      }
     }
    }
    break;
   default:
    break;
   }

   return false;
  }
 };

效果图：


XYMultipleSeriesRenderer绘制折线图
09-25
XYMultipleSeriesRenderer绘制折线图形
XYMultipleSeriesRenderer 绘制K线图，点击弹出pop (demo)
silvia0427的专栏
12-18 1996
之前写过一个这个问题的主要代码，现在放上完整的一个demo.备注：我不知道怎么上传附件啊。。所以只能再次开个新文将代码粘过来。。图片资源就没法了。。。项目中需要添加  achartengine-0.6.0.jarActivity:package com.test;import java.text.SimpleDateFormat;import java.util.ArrayList;import
android AChartEngine XYMultipleSeriesRenderer样式属性说明
平常心
05-10 4681
前两天再做一个关于AChartEngine曲线的实时显示，学习了一些AChartEngine基本用法，现在将XYMultipleSeriesRenderer样式属性说明记录下来和大家一起分享一下XYMultipleSeriesRenderer renderer = new XYMultipleSeriesRenderer(); renderer.setChartTitle(depid+"号房间
Android平台XYMultipleSeriesRenderer绘制曲线和折线图技巧
要在Android中画出曲线图，开发人员会使用各种图形库或自定义绘图技术。标题中提到的“Android画曲线图”和描述中提及的“XYMultipleSeriesRenderer”暗示了使用了Android平台上一套比较流行的数据可视化组件库。 ...
Android中使用XYMultipleSeriesRenderer绘制动态曲线
标题中的“android绘制动态曲线”涉及到了在Android平台上绘制动态图形的技术点。在Android开发中，动态图形通常用于展示数据变化，例如股票价格、体温监测等场景。动态曲线是指随时间或数据变化而更新其形状的图表...
掌握Android图表绘制技巧：使用XYMultipleSeriesRenderer绘制折线图
"XYMultipleSeriesRenderer绘制折线图"这个主题指出了使用一个特定的图表库或者工具类——XYMultipleSeriesRenderer，来实现折线图的绘制。 要了解XYMultipleSeriesRenderer如何绘制折线图，首先需要掌握以下几个...
Android实时曲线图绘制教程与K线图实战
本次我们将详细探讨如何在Android平台上使用XYMultipleSeriesRenderer绘制实时K线图，这是一个非常适合初学者的案例，我们将会深入解析相关知识点，以帮助初学者掌握在Android上进行实时数据展示的核心技术。...
AChartEngine中属性XYMultipleSeriesRenderer和XYSeriesRender属性详解
weixin_33853794的博客
11-23 503
/** * 1.折线图的绘制， * 生成图表有两种方法，第一种方法：开启一个Activity。 * 第二种方法：返回View。 */ /** * 第一种方法思路分析 * 1.1使用startActivity方法, * 特别注意：由于这里我们要调用内部的Activity所以必须在注册文件中注册该Activity:<activity android:...
Android传感器画图,Android传感器之绘图篇——Handler学习
weixin_31002075的博客
05-27 699
在学习Android传感器的过程中，需要采集传感器实时数据并显示在图表中，绘制图表采用Android自己带的canvas效率不高，因此需要采用第三方的绘图库achartengine。首先简要介绍一下achartengine包含的模块。XYSeries: 最常用的数据结构，主要包括一系列的double型(x,y)点对及一个名称(title)。XYValueSeries:包括一系列的(x,y,valu...
unity怎么根据坐标绘制线_怎么根据阴线和阳线判断股票将稳步上涨或者下跌不止，K线组合...
weixin_39923806的博客
12-06 195
继续学习股票K线组合知识，只有不断学习进步才能有所收益。K线组合稳步上涨我们先来了解一下稳步上涨的图形，如下图所示：稳步上涨K线组合稳步上涨的特征在上涨的过程中，众多阳线夹着较少的小阴线，股价将一路上扬。K线组合稳步上涨的技术含义稳步上涨K线组合的出现，表示多头力量在高度控盘，股价会继续上涨，是一个做多信号，投资者应继续持有，获取更大的利润。K线组合稳步上涨组合的提示后面的阳线对前面的阴线覆盖的速...
一个matplotlib 画K线图 +一个高效的画图工具Serborn
jinruoyanxu的博客
03-28 2万+
http://www.financecomputing.net/wordpress/?p=1047 Seaborn Matplotlib是Python主要的绘图库。但是，我不建议你直接使用它，原因与开始不推荐你使用NumPy是一样的。虽然Matplotlib很强大，它本身就很复杂，你的图经过大量的调整才能变精致。因此，作为替代，我推荐你一开始使用
Android 统计图表引擎AChartEngine(二) - 示例源码概述和分析
小Lee的专栏
01-24 4518
首先看一下示例中类之间的关系: 1. ChartDemo这个类是整个应用程序的入口,运行之后的效果显示一个list. 2. IDemoChart接口,这个接口定义了三个方法, getName()返回值是listitem上显示的标题; getDesc()返回值是listitem上显示的描述内容. excute(context)返回值是一个Intent,当点击li
使用AChartEngine画折线图
wangpengfei360
07-04 206
其实跟柱状图差不多，但是Intent应使用ChartFactory.getLineChartIntent()方法获取到。看Activity中的代码： public class main extends ListActivity { private static final int SERIES_NR = 2; /** Called when the activity is first crea...
Highcharts中更新series的5种方法
热门推荐
沧海一粟 —— 技术随手记
06-20 4万+
用Highcharts画图时，经常需要更新所画的图表，最常见的就是改变数据以更新图表。在Highcarts中，数据对应的参数是series。这儿就以图1的柱状图为例，列举如何更新series的4种方法，以供参考。源代码可从这儿访问。 图1 1. series.update Highcarts图表中，可以有多个series。当我们想更新其中某一个series时，可以直接调用其updat
从零开始实现k线图走势图绘制(iOS实战篇)
努力，可能成功！放弃，注定失败！
12-16 7405
上篇文章中，我们了解了走势图k线图绘制及的一些关键点，基于大家都懂期货股票这些东西的基础上去讲解的，说的也不够全面，这篇文章我们以实战为主，一步一步写出可以商业化的k线图。 一、什么是k线图？ 1.k线图：有最新价、收盘价、开盘价、最高价、最低价、均价、卖量、买量等等。而我们需要展示给用户看的第一眼就是把它们全部绘制为k线图，直观。还有部分要转化为数值直接推动； 蜡烛：需要用到收盘价、开盘价
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值