XYMultipleSeriesRenderer 繪制K線圖，點擊彈出pop

本文是講述如何使用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;
  }
 };

效果圖：