折线图(五)根据实际情况值,绘制在折线图坐标轴对应位置上

原创 2015年11月19日 13:43:14

实现思路,先计算保存这些实际值,然实际值对应的坐标轴上的真正位置,从而绘制绘制出来。主要代码如下


/**
 * 绘制所有实际值坐标
 * @param canvas
 */
public void drawPoints(Canvas canvas)
{
    if(pointQueue.isEmpty())
        return;
    //首先计算取1xValue多少px
    float  unitXValue_px = xUnit / xValue;
    Paint paint = new Paint();//画点的画笔
    paint.setColor(Color.GREEN);//设置点为绿色
    paint.setStrokeWidth(30);//设置画笔为30粗度
    //遍历每一个点绘制出来,并移除在队列中位置
    while (!pointQueue.isEmpty())
    {
        LineChartPoint point = pointQueue.poll();
        //算出这点x, y坐标
        float  x = point.xValue * unitXValue_px+chardPading;
        float  y = getMeasuredHeight() - chardPading - point.yValue * unitXValue_px;
        canvas.drawPoint(x, y , paint);//绘制点
    }
}

/**
 * 添加折线图坐标轴点坐标
 * @param points
 */
public void setLineChartPoint(LineChartPoint ...points)
{
    if(null == points || points.length < 1)
        return;
    for(LineChartPoint point : points)
    {
        pointQueue.add(point);
    }
    invalidate();//通知view重新绘制界面,也就是view会重新调用onDraw方法
}

全部代码:



public class MainActivity extends AppCompatActivity {

    private LineChartView lineChartView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        lineChartView = (LineChartView) findViewById(R.id.lineChartView);


        //甲公司第20天盈利 100万
        LineChartView.LineChartPoint point = new LineChartView.LineChartPoint();
        point.setxValue(20);
        point.setyValue(100);

        //乙公司第60天盈利 20万
        LineChartView.LineChartPoint point1 = new LineChartView.LineChartPoint();
        point1.setxValue(60);
        point1.setyValue(20);
        lineChartView.setLineChartPoint(point, point1);
    }



}


<?xml version="1.0" encoding="utf-8"?>
<resources>

    <declare-styleable name="LineChartView">

        <!-- 视图padding -->
        <attr name="chartPadding" format="dimension"></attr>


        <!-- x轴单位 长度-->
        <attr name="xUnit" format="dimension"></attr>

        <!-- x轴单位值-->
        <attr name="xValue" format="integer"></attr>


        <!-- x轴单位字体大小-->
        <attr name="unitTextSize" format="dimension"></attr>


        <!-- x轴单位名称-->
        <attr name="xName" format="string"></attr>


        <!-- x轴单位 长度-->
        <attr name="yUnit" format="dimension"></attr>

        <!-- x轴单位值-->
        <attr name="yValue" format="integer"></attr>


        <!-- x轴单位名称-->
        <attr name="yName" format="string"></attr>

    </declare-styleable>

</resources>
 


/**
 * 绘制折线图详情
 */
public class LineChartView extends View

{


    /**
     * 折线图padding
     */
    private float chardPading;

    /**
     * x单位长度
     */
    private float xUnit;



    /**
     * y单位长度
     */
    private float yUnit;


    private float textSize;

    /**
     * 单位名字
     */
    private String xName;

    /**
     * 单位值
     */
    private int xValue;


    private String yName;

    private int yValue;

    public LineChartView(Context context, AttributeSet attrs) {
        super(context, attrs);
        //获取提供的chardPading长度, 如果不提供,默认为100px. 注意,拿到的dip单位最终会转化为px
        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.LineChartView);
        chardPading = typedArray.getDimension(R.styleable.LineChartView_chartPadding, 100);//默认视图距离边界的长度
        xUnit = typedArray.getDimension(R.styleable.LineChartView_xUnit, 50);//默认单位长度为50px
        xName = typedArray.getString(R.styleable.LineChartView_xName);//x 轴 名字
        xName = null != xName ? xName : "x";//如果不提供名字,则默认为x
        xValue = typedArray.getInt(R.styleable.LineChartView_xValue, 10);//默认单位值为10
        textSize = typedArray.getDimension(R.styleable.LineChartView_unitTextSize, 25);//默认25px字体大小
        yUnit =  typedArray.getDimension(R.styleable.LineChartView_yUnit, xUnit);//默认单位值为与xUnit一样
        yName = typedArray.getString(R.styleable.LineChartView_yName);//y 轴 名字
        yName = null != yName ? yName : "y";//如果不提供名字,则默认为y
        yValue = typedArray.getInt(R.styleable.LineChartView_yValue, xValue);//默认单位值与xValue一样
    }


    @Override
    protected void onDraw(Canvas canvas) {
        //绘制坐标轴
        drawAxis(canvas);
        //绘制x坐标轴详情
        drawX_AxisState(canvas);
        drawY_AxisState(canvas);
        drawPoints(canvas);

    }

    /**
     * 为了不遮住坐标轴,给予100padding给它
     */
    int arrowPadding = 40;

    /**
     * 绘制x轴名称,按提供的长度来标识长度值
     *
     * @param canvas
     */
    private void drawX_AxisState(Canvas canvas) {
        Paint paint = new Paint(); //直线画笔

        paint.setColor(Color.BLACK);//设置画笔为黑色
        paint.setStrokeWidth(2);//设置画笔尖大小为2px
        int height = getMeasuredHeight() - (int) chardPading;
        int drawXlengh = getMeasuredWidth() - (int) chardPading * 2 - arrowPadding;//保留能看到箭头
        int xUnit = (int) this.xUnit;
        Rect nRect = new Rect();
        Paint xValuePaint = new Paint(); //画笔
        xValuePaint.setColor(Color.BLACK);
        xValuePaint.setTextSize(textSize);
        xValuePaint.getTextBounds(xName, 0, xName.length(), nRect);
        int nWith = nRect.width();//获取x轴名字长度
        int nHeight = nRect.height();//获取x轴名字高度
        canvas.drawText(xName, getMeasuredWidth() - chardPading - nWith / 2, height + nHeight + 15, xValuePaint);
        for (int i = xUnit, j = 1; i < drawXlengh; i += xUnit, j++) {
            canvas.drawLine(chardPading + i, height, chardPading + i, height - 15, paint);
            int drawvalue = xValue * j;
            Rect rect = new Rect();
            xValuePaint.getTextBounds(drawvalue + "", 0, (drawvalue + "").length(), rect);
            int txtWith = rect.width();
            int txtHeght = rect.height();
            canvas.drawText(drawvalue + "", chardPading + i - txtWith / 2, height + txtHeght + 15, xValuePaint);
        }
    }


    /**
     * 绘制y轴名称,按提供的长度来标识长度值
     *
     * @param canvas
     */
    private void drawY_AxisState(Canvas canvas) {
        Paint paint = new Paint(); //直线画笔
        Paint yValuePaint = new Paint(); //画笔
        yValuePaint.setColor(Color.BLACK);
        yValuePaint.setTextSize(textSize);
        paint.setColor(Color.BLACK);//设置画笔为黑色
        paint.setStrokeWidth(2);//设置画笔尖大小为2px
        int height = getMeasuredHeight() - (int) chardPading;
        int drawYlengh = getMeasuredHeight() - (int) chardPading * 2 - arrowPadding;//保留能看到箭头
        int yUnit = (int) this.yUnit;
        Rect nRect = new Rect();
        yValuePaint.getTextBounds(yName, 0, yName.length(), nRect);
        int nWith = nRect.width();
        int nHeight = nRect.height();
        canvas.drawText(yName, chardPading - nWith - 15, chardPading + nHeight / 2, yValuePaint);
        for (int i = yUnit, j = 1; i < drawYlengh; i += yUnit, j++) {
            int drawvalue = yValue * j;
            Rect rect = new Rect();
            yValuePaint.getTextBounds(drawvalue + "", 0, (drawvalue + "").length(), rect);
            int txtWith = rect.width();
            int txtHeght = rect.height();
            canvas.drawLine(chardPading, height - i, chardPading + 15, height - i, paint);
            canvas.drawText(drawvalue + "", chardPading - txtWith - 15, height - i + txtHeght / 2, yValuePaint);
        }
    }

    /**
     * 为了浪费资源控件,一次性用的东西,我们采取使用队列来缓存这些点
     */
    private Queue<LineChartPoint> pointQueue = new LinkedList<LineChartPoint>();


    /**
     * 绘制所有实际值坐标
     * @param canvas
     */
    public void drawPoints(Canvas canvas)
    {
        if(pointQueue.isEmpty())
            return;
        //首先计算取1xValue多少px
        float  unitXValue_px = xUnit / xValue;
        Paint paint = new Paint();//画点的画笔
        paint.setColor(Color.GREEN);//设置点为绿色
        paint.setStrokeWidth(30);//设置画笔为30粗度
        //遍历每一个点绘制出来,并移除在队列中位置
        while (!pointQueue.isEmpty())
        {
            LineChartPoint point = pointQueue.poll();
            //算出这点x, y坐标
            float  x = point.xValue * unitXValue_px+chardPading;
            float  y = getMeasuredHeight() - chardPading - point.yValue * unitXValue_px;
            canvas.drawPoint(x, y , paint);//绘制点
        }
    }

    /**
     * 添加折线图坐标轴点坐标
     * @param points
     */
    public void setLineChartPoint(LineChartPoint ...points) {
        if (null == points || points.length < 1)
            return;
        for (LineChartPoint point : points) {
            pointQueue.add(point);
        }
        invalidate();//通知view重新绘制界面,也就是view会重新调用onDraw方法

    }

    /**
     * 折线坐标点
     */
    public static class LineChartPoint
    {
        private float xValue;
       private  float yValue;

        public float getxValue() {
            return xValue;
        }

        public void setxValue(float xValue) {
            this.xValue = xValue;
        }

        public float getyValue() {
            return yValue;
        }

        public void setyValue(float yValue) {
            this.yValue = yValue;
        }
    }

    /**
     * 绘制坐标轴, 并且设置100padding给LineChartView
     *
     * @param canvas
     */
    private void drawAxis(Canvas canvas) {
        int chartViewHeight = getMeasuredHeight(); //获取LineChartView高度
        int charViewWidth = getMeasuredWidth(); //获取LineChartView宽度
        Paint paint = new Paint(); //画笔
        paint.setColor(Color.BLACK);//设置画笔为黑色
        paint.setStrokeWidth(4);//设置画笔尖大小为4px

        /*
        * 绘制直线.在2点之间连线
        * startX 起点的x坐标
        * startY 起点的y坐标
        * endX 终点的x坐标
        * endY 终点的y坐标
        * canvas.drawLine(startX, startY, endX, endY)
        */

        //绘制直线paddingTop 了chardPading的y轴
        canvas.drawLine(chardPading, chartViewHeight - chardPading, chardPading, chardPading, paint);

        //绘制y轴左边半边箭头
        canvas.drawLine(chardPading, chardPading, chardPading - 10, chardPading + 10, paint);

        //绘制y轴右边半边箭头
        canvas.drawLine(chardPading, chardPading, chardPading + 10, chardPading + 10, paint);

        //绘制直线paddingLeft 了chardPading的x轴,
        canvas.drawLine(chardPading, chartViewHeight - chardPading, charViewWidth - chardPading, chartViewHeight - chardPading, paint);

        //绘制x轴上半部分箭头
        canvas.drawLine(charViewWidth - chardPading, chartViewHeight - chardPading, charViewWidth - chardPading - 10, chartViewHeight - chardPading - 10, paint);

        //绘制x轴下半部分箭头
        canvas.drawLine(charViewWidth - chardPading, chartViewHeight - chardPading, charViewWidth - chardPading - 10, chartViewHeight - chardPading + 10, paint);
    }


}


<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
    android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="折线图(五)各公司N天盈利N元"
        android:layout_centerHorizontal="true"
        />

    <sam.android.utils.widget.LineChartView
        android:id="@+id/lineChartView"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:chartPadding="30dp"
        app:xValue="10"
        app:xUnit="30dp"
        app:xName="万元"
        app:unitTextSize="12sp"
        app:yValue="10"
        app:yUnit="30dp"
        app:yName="天数"
        />

</RelativeLayout>






未更新完,待更新6...........



Qt中对坐标轴的相关操作

//获取坐标轴的相关值 if(m_plotCurve != NULL) {        ui->lineEdit_nameX->setText(m_plotCurve->m_plot->axi...
  • GraceLand525
  • GraceLand525
  • 2015年01月12日 10:20
  • 862

QT5简易坐标系和折线图的绘制

1. QT坐标系统。 在画坐标系之前,我们得先了解一下QT5的坐标系统。 QT5的坐标设定左上角为原点(0,0),向右为x轴正方向,向下为y轴正方向,这点与生活中常见的直角坐标系不同。 2...
  • a343902152
  • a343902152
  • 2015年07月23日 15:22
  • 10368

折线图(一)绘制折线图坐标轴

如图,对于手机图形的绘制, 他的坐标轴原点在左上方. 绘制折线图的第一步就是要先绘制出, 折线图的坐标轴,由于手机坐标轴原点在左上方.那么折线图的原点y轴久正好相反。 原点坐标是(0, heigh...
  • YoYo_Newbie
  • YoYo_Newbie
  • 2015年11月16日 22:27
  • 803

使用achartengine 实现简单静态、动态折线图

简介 AChartEngine是为Android应用而设计的绘图工具库。可用于绘制多种图表。ChartEngine支持的图表类型:折线图、区域图、散点图、时间图、柱状图、饼状图、气泡式图表、环形图...
  • a953210725
  • a953210725
  • 2014年08月07日 10:21
  • 1088

Flex 折线图LineChart, 坐标轴偏移

问题如图: 代码如下:
  • u013606980
  • u013606980
  • 2014年02月07日 14:52
  • 1157

Qt Qt 绘制折线图 计算线段交点

Qt 绘制折线图 先看一张图片 本程序实现了一下功能: (1)实时画鼠标线 (2)画折线图 (3)实时求鼠标线与折线得交点,并显示在窗口...
  • u013064585
  • u013064585
  • 2017年02月26日 23:03
  • 351

折线图(三)绘制x轴单位值,以及标识物

这里的坐标轴只是演示,到后面还要根据情况就算x,y轴的大小决定 折线图的大小。 attrs.xml xml version="1.0" encoding="utf-8"?> na...
  • YoYo_Newbie
  • YoYo_Newbie
  • 2015年11月17日 14:00
  • 461

Matlab绘图笔记:修改坐标轴显示的刻度密度,lable文字,和位置

问题描述:想修改X轴的刻度密度,lable文字,和位置。即将如下面所示的matlab默认的左图效果修改为右图效果:...
  • arackethis
  • arackethis
  • 2015年04月12日 23:02
  • 5944

ECharts折线图小结

Echarts的折线图
  • qq_38317491
  • qq_38317491
  • 2017年08月01日 11:13
  • 341

Dev ChartControl 温湿度折线图

/** * 名称: 温湿度界面 * 作者: lizhongxiang * 时间: 2016.12.04 * 版本: 1 * 说明: 温湿度展示页 *        * 历史: * 版本 时间    ...
  • u014117094
  • u014117094
  • 2016年12月05日 14:46
  • 1259
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:折线图(五)根据实际情况值,绘制在折线图坐标轴对应位置上
举报原因:
原因补充:

(最多只允许输入30个字)