ggplot2绘制柱形图（2）

Posted 2023-04-19

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ggplot2绘制柱形图（2）相关的知识，希望对你有一定的参考价值。

参考技术A ggpolt2有两个函数可以绘制柱形图，一个是昨天介绍的geom_bar（stat_count），另一个是geom_col

geom_bar是对每一组中的样本个数进行计数后画图，柱子的高度代表组内样本的个数。然而在设定stat="identity" 这个参数后，该函数就不会对样本进行计数，此时，柱子的高度就是你数据内相应的数值。

本文要介绍的是 geom_col , 该函数是对每个组内不同类型的事件计数后，计算构成比进行绘图，每个柱子的高度代表每个组内事件的总数，柱子内部还会被划分成不同比例，代表不同事件的构成比。

本文用到的数据：

简单介绍一下，图1 是SNP数据，有12个样本，每个样本内部还有A-G, C-T, A-C, A-T, C-G, G-T等事件，数字代表SNP位点个数，即事件发生数，geom_col就是用于表示每个样本内的事件发生数的构成比，每个柱子内都会按照构成比被分成若干块。图2 表示每种SNP类型所属的大类，是Transition（转换）还是Transversion（颠换），图2不是画图所必需的，但可以在图上表示出来，增加图片包含的信息量。

snp <- read.csv(file = "clipboard",header = T,sep = "\t") #读入数据（图1）

type <- read.csv(file = "clipboard",header = T,sep = "\t") #读入数据（图2）

snp <- melt(snp,id = c("SNP_type")) #宽数据变成长数据

>head(snp)

>snp <- merge( snp , type ,by = "SNP_type") #按照SNP_type合并两个数据

>head(snp)

snp$SNP_type <- factor(snp$SNP_type,levels = c("A-G","C-T","A-C","A-T","C-G","G-T")) #按照这个顺序对每个柱子内部的小方块进行排序（从上到下）

ggplot(snp)+

geom_col (mapping = aes(variable,value,fill = SNP_type,color = Type),width = 0.9,size = 1.2)+ #可以设置position = "fill" 参数，让每个柱子等高，这样方便比较每个样本的构成比。

coord_cartesian(expand = F,xlim = c(0.45,12.65))+

scale_color_manual(values = c("black","grey"))+

labs(x = "Group",y = "",fill = "SNP type",color = "Type")+

theme(panel.background = element_blank(),

panel.grid.major.y = element_line(colour = "grey",linetype = 2),

axis.line = element_line(colour = "black",size = rel(2)),

axis.title = element_text(size = rel(1.2)),

axis.text.x = element_text(size = rel(1.5),angle = 45,hjust = 1),

axis.text.y = element_text(hjust = 1,size = rel(1.5)),

axis.ticks = element_line(size = rel(1.5)),

legend.key.size = unit(12,"mm"), #图例中图形的尺寸

legend.title = element_text(size = rel(1.2)),

legend.text = element_text(size = rel(1.2)),

legend.spacing.y = unit(5,"mm"), #图例的标题和图例的图形之间的间隔

plot.margin = margin(22,10,5,1))

Android柱形图绘制

一直在维护www.halloandroid.com我的个人博客网站，发现漏了一篇没发在上面，补回来。

上次写了一篇有关自定义折线图的文章，今天写一篇关于柱形图的文章，因为看了网上一位阿拉丁神灯大神的文章，所以自己也想动手写一个，熟练和学习一下自定义View。话不多说，开始撸！

整体的思路:

画柱状图 –>画竖线 –>画顶部横线 –>画文字

自定义View四步骤走起；

还是我们自定View的那几个步骤：

1、自定义View的属性
2、在View的构造方法中获得我们自定义的属性
[ 3、重写onMesure ]
[ 4、重写onLayout ]
5、重写onDraw

一，在attrs里面进行声明

 <declare-styleable name="HistogramView">
        <attr name="cylinderColor" format="color|reference"/><!--柱体颜色-->
        <attr name="axesColor" format="color|reference"/><!--坐标线颜色-->
        <attr name="textColor"/><!--文字颜色-->
        <attr name="cylinderWith" format="integer"/><!--主题宽度-->
        <attr name="maxSize" format="float"/><!--最大值-->
        <attr name="textSize"/><!--文字字体大小-->
    </declare-styleable>

二、在View的构造方法中获得我们自定义的属性

public HistogramView(Context context, AttributeSet attrs, int defStyleAttr) 
        super(context, attrs, defStyleAttr);

        TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.HistogramView);
        maxSize = a.getFloat(R.styleable.HistogramView_maxSize, 100f);
        cylinderWidth = a.getInt(R.styleable.HistogramView_cylinderWith, 50);
        textSize = a.getDimensionPixelSize(R.styleable.RoundProgressBar_textSize, (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP,
                12, getResources().getDisplayMetrics()));
        cylinderColor = a.getColor(R.styleable.HistogramView_cylinderColor, 0xff40E0D0);
        axesColor = a.getColor(R.styleable.HistogramView_axesColor, 0xffcdcdcd);
        textColor = a.getColor(R.styleable.HistogramView_textColor, 0xffababab);
        a.recycle();
        initColorPaint();
    
        private void initColorPaint() 
        //设开始X坐标为0
        startX = 0;
        //设开始Y坐标为50
        startY = 50;
        //初始化柱状图画笔
        mBarPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mBarPaint.setColor(cylinderColor);
        mBarPaint.setStyle(Paint.Style.FILL);
        //初始化线的画笔
        mLinePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mLinePaint.setStyle(Paint.Style.FILL);
        mLinePaint.setColor(axesColor);
        mLinePaint.setStrokeWidth(2);

        mTextPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mTextPaint.setTextSize(textSize);
        mTextPaint.setStrokeWidth(1);
        mTextPaint.setColor(textColor);

三、重写onMeasure，处理一下wrapcontent问题

 @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) 
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int widthSpecMode = MeasureSpec.getMode(widthMeasureSpec);
        int widthSpecSize = MeasureSpec.getSize(widthMeasureSpec);
        int heightSpecMode = MeasureSpec.getMode(heightMeasureSpec);
        int heightSpecSize = MeasureSpec.getSize(heightMeasureSpec);
        if (widthSpecMode == MeasureSpec.AT_MOST && heightSpecMode == MeasureSpec.AT_MOST) //都是wrapcontent
            setMeasuredDimension((int) maxSize, startY + 10 + histogramrNum * (cylinderWidth + 2 * 10));
         else if (widthSpecMode == MeasureSpec.AT_MOST) //如果宽度为wrapcontent  高度为数值的时候
            setMeasuredDimension((int) maxSize, heightSpecSize);// 宽度设置为maxSize
         else if (heightSpecMode == MeasureSpec.AT_MOST)  //如果宽度为数值的时候，高度为wrapcontent
            setMeasuredDimension(widthSpecSize, startY + 10 + histogramrNum * (cylinderWidth + 2 * 10)); //高度为每条柱状图的宽度加上间距再乘以柱状图条数再加上开始Y值后得到的值

四、重写onLayout，在Ondraw之前获取对应的宽高

    @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) 
        super.onLayout(changed, left, top, right, bottom);

        measuredWidth = getMeasuredWidth();//获得测量后的宽度

        measuredHeight = getMeasuredHeight();//获得测量后的高度

        stopX = measuredWidth - cylinderWidth; //计算结束X的值

        deltaX = (stopX - (startX + 7 * cylinderWidth / 5)) / verticalLineNum; //计算每条竖线之间的间距

        deltaY = (measuredHeight - startY - cylinderWidth * histogramrNum) / histogramrNum; //计算每条柱状图之间的间距

        numPerUnit = maxSize / verticalLineNum; //计算出每条竖线所代表的数值

        currentHorizentalLineProgress = stopX;//初始化最上面横线的初始进度

五、进入最重要的正题了，重写onDraw，糖炒栗子啦。

首先画柱状图

画柱状图的方法就是使用canvas.drawRect(float left, float top, float right, float bottom, Paint paint)

 /**
         * 画柱状图
         */
        for (int i = 0; i < histogramrNum; i++) //for循环画出每一个柱状图
            if (currentBarProgress[i] < (numList.get(i) / maxSize) * stopX) 
            //这个for循环是为了一点点的画出增加感，就和progress差不多
                currentBarProgress[i] += 5;
                postInvalidateDelayed(10);
            
            canvas.drawText(nameList.get(i), startX, startY + deltaY + i * (deltaY + cylinderWidth) + 3 * cylinderWidth / 4, mTextPaint);

            canvas.drawRect(startX + 7 * cylinderWidth / 5, startY + deltaY + i * (deltaY + cylinderWidth), currentBarProgress[i], startY + deltaY + i * (deltaY + cylinderWidth) + cylinderWidth, mBarPaint);

接着画竖线和文字

有了上面画柱状图的思路，画竖线就非常容易想了，和画柱状图是一个思路，也是Activity中传入需要画几条竖线，然后在onDraw方法里分别去计算他们的当前进度值，然后再分别去画。

 /**
         * 画竖线
         */
        for(int i=0 ; i<verticalLineNum ; i++)
            if (currentVerticalLineProgress< measuredHeight) 
                currentVerticalLineProgress+=3;
                postInvalidateDelayed(10);
            
            canvas.drawLine((startX+7*barWidth/5)+(i+1)*deltaX, startY, (startX+7*barWidth/5)+(i+1)*deltaX, currentVerticalLineProgress, mLinePaint);
            //画文字
            canvas.drawText(numPerUnit*(i+1)+unit, (startX+7*barWidth/5)+(i+1)*deltaX-barWidth, startY-barWidth/5, mTextPaint);

最后画顶部横线

/**
         * 画最上面的横线
         */
        if (currentHorizentalLineProgress>startX+7*barWidth/5) 
            currentHorizentalLineProgress-=10;
            postInvalidateDelayed(10);
        
        canvas.drawLine(stopX, startY, currentHorizentalLineProgress, startY, mLinePaint);

使用方法：

布局文件中：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_histogram"
    android:layout_width="match_parent"
    android:layout_height="match_parent"

    tools:context="com.shanlovana.rcimageview.activities.HistogramActivity">

    <TextView
        android:id="@+id/textview"
        android:layout_width="match_parent"
        android:layout_height="30dp"
        android:text="我公司盈利情况"
        android:textColor="@color/colorAccent"
        android:textSize="24sp"
        />

    <com.shanlovana.rcimageview.views.HistogramView
        android:id="@+id/histogram_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/textview"
        android:layout_marginTop="10dp"
        app:axesColor="@color/colorAccent"
        app:cylinderWith="40"
        app:textColor="@color/colorPrimary"
        app:textSize="20sp"
        app:maxSize="10"
        app:cylinderColor="#000000"
        />
</RelativeLayout>

Activity中：

public class HistogramActivity extends AppCompatActivity 
    HistogramView mHistogramView;

    private ArrayList<Float> numList;
    private ArrayList<String> nameList;

    @Override
    protected void onCreate(Bundle savedInstanceState) 
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_histogram);
        mHistogramView = (HistogramView) findViewById(R.id.histogram_view);
        // mPercentageBar= (PercentageBar) findViewById(R.id.percentageBar_view);
        numList = new ArrayList<Float>();
        nameList = new ArrayList<String>();
        numList.add(7.0f);
        numList.add(3.0f);
        numList.add(4.0f);
        numList.add(7.0f);
        numList.add(4.0f);
        numList.add(8.0f);
        numList.add(9.0f);
        numList.add(9.5f);
        nameList.add("一");
        nameList.add("二");
        nameList.add("三");
        nameList.add("四");
        nameList.add("五");
        nameList.add("六");
        nameList.add("七");
        nameList.add("八");
        mHistogramView.setUnit("万");
        mHistogramView.setNumListForEvery(numList);
        mHistogramView.settNameListForEvery(nameList);