Android折線圖,曲線圖,柱狀圖,餅狀圖

ChartView

ChartView是一個Android開源圖表庫。目前僅支持折線圖,曲線圖,柱狀圖,餅狀圖,以及折線圖和曲線圖點擊之后的狀態變化,可以選擇是畫一個圖片還是一個背景框。

Screens

折線圖和曲線圖:

chartview.gif

餅狀圖有內圓:

piechart_inside.gif

餅狀圖沒有內圓:

piechart.gif

Usage

Gradle

  • Step 1. Add LineChartView
    dependencies {
           compile 'com.veken:chart_view:1.0.2'
    }

折線圖

XML

  <com.veken.linecharviewmodule.LineChartView
            android:id="@+id/chart_view"
            android:layout_width="match_parent"
            android:layout_height="300dp"
            app:showPicResource="@mipmap/ic_launcher"
            app:defaultStrokeWidth="0.5dp"
            app:pointClickRadius="3dp"
            app:defaultTextSize="16sp"
            app:pointDefaultRadius="2dp"
            app:isNeedBg="true"
            app:clickable="true"
            app:startColor="@color/startColor"
            app:endColor="@color/endColor" />

折線圖自定義屬性

attrs description
showPicResource 點擊之后顯示的圖片資源
defaultTextSize 默認文字大小
yLableTextColor Y軸lable文字顏色
xLableTextColor X軸Lable文字顏色
defaultColor 默認顏色
axisColor 坐標軸顏色
defaultStrokeWidth 默認畫筆的StrokeWidth
axisMarginHeight X軸下的文字和X軸之間的間隔高度
yLableText Y軸的文字描述
isNeedBg 是否需要背景(默認為不需要=false)
isNeedDrawConnectYDataLine 是否需要點和Y軸之間的連接線(默認為不需要=false)
dottedLineWidth 連接線為虛線時的寬度
connectLineColor 連接線的顏色
pointMarginHeight 點和文字之間的間隔高度
pointDefaultRadius 點默認半徑
pointClickRadius 點擊之后圓的半徑
textAndClickBgMargin 點擊之后文字和點擊背景上下左右的間隔
clickBgColor 點擊之后的背景顏色
startColor 背景顏色的起始色
endColor 背景顏色的結束色
clickable 是否可以點擊

Java

LineChartView lineChartView = view.findViewById(R.id.line_chart_view);
lineChartView.setyLableText("折線圖");
//設置點擊背景(可以為圖片,也可以為一個顏色背景,大小根據textAndClickBgMargin設置)
lineChartView.setDrawBgType(DrawBgType.DrawBitmap);
//設置圖片資源
lineChartView.setShowPicResource(R.mipmap.click_icon);
//連接線為虛線(也可以為實現)
lineChartView.setDrawConnectLineType(DrawConnectLineType.DrawDottedLine);
lineChartView.setClickable(true);
//是否需要畫連接線
lineChartView.setNeedDrawConnectYDataLine(true);
//連接線的顏色
lineChartView.setConnectLineColor(getResources().getColor(R.color.default_color));
//是否需要背景
lineChartView.setNeedBg(true);
//畫曲線圖(也可以為折線圖)
lineChartView.setDrawLineType(DrawLineType.Draw_Curve);

Data

private ArrayList<ChartBean> lineChartBeanList;
if(lineChartBeanList ==null){
    lineChartBeanList = new ArrayList<>();
}
lineChartView.setDefaultTextSize(24);
Random random = new Random();
for(int i=0;i<7;i++){
    ChartBean lineChartBean = new ChartBean();
    lineChartBean.setValue(String.valueOf(random.nextInt(10000)));
    lineChartBean.setDate(String.valueOf(i));
    lineChartBeanList.add(lineChartBean);
}
lineChartView.setData(lineChartBeanList);
}

柱狀圖

XML

  <com.veken.chartview.view.BarChartView
        android:id="@+id/bar_chart_view"
        android:layout_width="match_parent"
        android:layout_height="300dp"/>

柱狀圖自定義屬性

attrs description
axisXItemWidth 每一個Item的寬度
axisXItemMargin Item之間的間隔
isNeedDrawYScale 是否需要畫Y軸的刻度
bgColor 柱狀圖背景顏色

其他同折線圖

Java

private BarChartView barChartView;
barChartView = view.findViewById(R.id.bar_chart_view);
//是否需要柱狀圖的背景
barChartView.setNeedBg(true);
//Y軸文字
barChartView.setyLableText("柱狀圖");
//是否需要連接線
barChartView.setNeedDrawConnectYDataLine(true);
//是否需要畫Y軸刻度
barChartView.setNeedDrawYScale(true);
//連接線的樣式為虛線(也可以為直線)
barChartView.setDrawConnectLineType(DrawConnectLineType.DrawDottedLine);

Data

private ArrayList<ChartBean> barChartBeanList;
if(barChartBeanList == null){
    barChartBeanList = new ArrayList<>();
}
Random random = new Random();
for (int i = 0; i < 7; i++) {
    ChartBean bean = new ChartBean();
    bean.setDate(i+"");
    bean.setValue(100*random.nextInt(10)+"");
    barChartBeanList.add(bean);
}
barChartView.setData(barChartBeanList);

餅狀圖

XML

  <com.veken.chartview.view.PieChartView
        android:id="@+id/piechart_view"
        android:layout_width="200dp"
        android:layout_height="200dp"
        app:insideText="Hello"
        app:insideTextColor="@color/default_color"
        app:insideRadiusPercent="0.5"/>

餅狀圖自定義屬性

attrs description
textColor 百分比文字顏色
textOutCircleMargin 文字和圓之間的間距
isNeedInside 是否需要內圓
insideText 內圓顯示的文字
insideBgColor 內圓背景顏色
insideTextSize 內圓文字大小
insideTextColor 內圓文字顏色
insideRadiusPercent 內圓半徑占外圓半徑的大小,默認(0.5)

Java

private PieChartView pieChartView;
pieChartView = view.findViewById(R.id.piechart_view);
//內圓中間文字
pieChartView.setInsideText("Hello");
//是否需要加載動畫
pieChartView.setIsNeedAnimation(true,5000);
//是否需要背景
pieChartView.setNeedInside(false);

Data

private List<PieChartBean> mList;
if(mList==null){
    mList = new ArrayList<>();
}
//各個扇形的背景顏色
int[] colors = new int[]{getResources().getColor(R.color.colorAccent),
    getResources().getColor(R.color.default_color),
    getResources().getColor(R.color.colorPrimary),
    getResources().getColor(R.color.endColor)};
Random random = new Random();
for(int i = 0;i<4;i++){
    PieChartBean pieChartBean = new PieChartBean();
    pieChartBean.setValue(random.nextInt(10)+i);
    pieChartBean.setColor(colors[i]);
    mList.add(pieChartBean);
}
pieChartView.setData(mList);

License

Copyright (C) 2018 Veken

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

About Me

github地址:https://github.com/Veken/LineChartView

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。