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.