您的位置:首页 > 移动开发 > Android开发

Android 实用hellocharts实现柱状图、线状图

2017-08-15 16:56 295 查看
1:Android Studio添加依赖

在app的build gradle中添加依赖

compile 'com.github.lecho:hellocharts-library:1.5.8@aar'


2:布局中

我这里是用的柱状图,线状图是linechartview

<lecho.lib.hellocharts.view.ColumnChartView
android:id="@+id/chart"
android:layout_width="match_parent"
android:layout_height="240dp"
android:paddingTop="24dp"/>


3:代码中

@BindView(R.id.chart)
ColumnChartView mChartView;

public final static String[] xValues = new String[]{"", "1", "2", "3", "4"};
private int month;
private SubcolumnValue subcolumnValue;

...

@Override
protected void initView(View view) {
super.initView(view);

initChartViews();

}

@RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
private void initChartViews() {
List<Column> columnList = new ArrayList<>(); //柱子列表
List<SubcolumnValue> subcolumnValueList;     //子柱列表(即一个柱子,因为一个柱子可分为多个子柱)
List<AxisValue> axisValues = new ArrayList<>();
for (int i = 1; i <= xValues.length-1; i++) {
subcolumnValueList = new ArrayList<>();
//获取数据处理
if (i == 1 || i == 0) {
subcolumnValue = new SubcolumnValue();
subcolumnValue.setValue(5.8f);
if (i <= month) {
subcolumnValue.setColor(getResources().getColor(R.color.oval_red));
} else {
subcolumnValue.setColor(getResources().getColor(R.color.charts_color));
}
subcolumnValueList.add(subcolumnValue);
}
if (i == 2) {
subcolumnValue = new SubcolumnValue();
subcolumnValue.setValue(6.0f);
if (i <= month) {
subcolumnValue.setColor(getResources().getColor(R.color.oval_red));

} else {
subcolumnValue.setColor(getResources().getColor(R.color.charts_color));
}
subcolumnValueList.add(subcolumnValue);
}
if (i >= 3) {
subcolumnValue = new SubcolumnValue();
subcolumnValue.setValue(7.0f);
if (i <= month) {
subcolumnValue.setColor(getResources().getColor(R.color.oval_red));
} else {
subcolumnValue.setColor(getResources().getColor(R.color.charts_color));
}
subcolumnValueList.add(subcolumnValue);
}

Column column = new Column(subcolumnValueList);
columnList.add(column);
//是否有数据标注
column.setHasLabels(true);//☆☆☆☆☆设置列标签
//是否是点击圆柱才显示数据标注
column.setHasLabelsOnlyForSelected(true);
//TODO 这一步是能让圆柱标注数据显示带小数的重要一步
ColumnChartValueFormatter chartValueFormatter = new SimpleColumnChartValueFormatter(1);
column.setFormatter(chartValueFormatter);
//给x轴坐标设置描述
axisValues.add(new AxisValue(i - 1).setLabel(xValues[i]));
}

//图形数据加载
ColumnChartData columnChartData = new ColumnChartData(columnList);
mChartView.setZoomEnabled(false);//手势缩放
mChartView.setInteractive(true);//设置图表是可以交互的(拖拽,缩放等效果的前提)
mChartView.setZoomType(ZoomType.HORIZONTAL);//设置缩放方向

Axis axisX = new Axis(axisValues);//x轴
Axis axisY = new Axis();//y轴
//是否显示网格线
axisY.setHasLines(true);
axisY.hasLines();
axisX.setTextSize(12);

//        axisX.setName("时间/月");
//        axisY.setName(getResources().getString(R.string.expect_income_tariff));

axisX.setTextColor(getResources().getColor(R.color.black_333));
axisY.setTextColor(getResources().getColor(R.color.black_333));
//设置倾斜显示在柱子内部
//        axisX.setInside(true);
//        axisX.setHasTiltedLabels(true);

columnChartData.setFillRatio(0.5F);//参数即为柱子宽度的倍数,范围只能在0到1之间
//设置显示的数据背景、字体颜色
columnChartData.setValueLabelsTextColor(getResources().getColor(R.color.black_333));// 设置数据文字颜色
columnChartData.setValueLabelBackgroundEnabled(false);
columnChartData.setAxisXBottom(axisX);
columnChartData.setAxisYLeft(axisY);
//把数据放到控件中
mChartView.setColumnChartData(columnChartData);

//设置竖线
Viewport v = new Viewport(mChartView.getMaximumViewport());
v.top = 7.2f;
v.bottom = 5.4f;
mChartView.setMaximumViewport(v);
v.left = -0.5f;
v.right = 6;
mChartView.setCurrentViewport(v);
}


4:搞定!
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: