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

MPAndroidChart项目实战（五）——MPAndroidChart组合图

2017-07-12 15:39 387 查看

二丶功能点技术点

1.MPAndroidChart组合图使用(平滑曲线，折线（效果图里的直线）)

2.趋势图分析，趋势图的实现

3.markView不显示趋势线上的数据

4.MPAndroidChart数据精度问题解决

5.markView显示数据格式问题解决

三丶核心代码

1.趋势图，趋势线的形成，其实是计算好的数据，计算公式看图（也可以自行百度）

移动端就爽啦，后台直接算好了给我们。

第一步数据处理（这里就不再像前面那样转化成实体类再转回来了）：

public void getData(){
String data ="{\"exponentList\":[{\"dottedLineData\":\"0.0109\",\"exponentDate\":\"07-04\",\"solidLineData\":\"0.0099\"}," +
"{\"dottedLineData\":\"0.0102\",\"exponentDate\":\"07-05\",\"solidLineData\":\"0.0039\"}," +
"{\"dottedLineData\":\"0.0095\",\"exponentDate\":\"07-06\",\"solidLineData\":\"0.0084\"}," +
"{\"dottedLineData\":\"0.0088\",\"exponentDate\":\"07-07\",\"solidLineData\":\"0.0195\"}," +
"{\"dottedLineData\":\"0.0081\",\"exponentDate\":\"07-08\",\"solidLineData\":\"0.0148\"}," +
"{\"dottedLineData\":\"0.0073\",\"exponentDate\":\"07-09\",\"solidLineData\":\"0.0035\"}," +
"{\"dottedLineData\":\"0.0066\",\"exponentDate\":\"07-10\",\"solidLineData\":\"0.0013\"}],\"overviewName\":\"负面舆情指数\"}";
try {
JSONObject object = new JSONObject(data);
JSONArray jsonArray = object.getJSONArray("exponentList");
dottedLineData = new ArrayList<>();
solidLineData = new ArrayList<>();
dataList = new ArrayList<>();
BigDecimal scale = new BigDecimal(100);
for (int i = 0, count = jsonArray.length(); i < count; i++) {
//改了这里
JSONObject jsonObject = jsonArray.optJSONObject(i);
String dottedData = jsonObject.optString("dottedLineData");
String solidData = jsonObject.optString("solidLineData");
String exponentDate = jsonObject.optString("exponentDate");
BigDecimal solid = new BigDecimal(solidData);
BigDecimal dotted = new BigDecimal(dottedData);
dottedLineData.add(new Entry(i,scale.multiply(solid).floatValue()));
solidLineData.add(new Entry(i,scale.multiply(dotted).floatValue()));
if ( Float.valueOf(dottedData)> maxData) {
maxData = Float.valueOf(dottedData);
}
if (Float.valueOf(solidData)>maxData){
maxData=Float.valueOf(solidData);
}
dataList.add(exponentDate);
}
} catch (JSONException e) {
e.printStackTrace();
}
}

这里得到平滑曲线上要展示的两条线的数据private List<Entry> dottedLineData,solidLineData，以及X轴要显示的日期数据List<String> dataList;

第二步：图标属性设置及属性

private void updataLineharts(){
lineCharts = (LineChartInViewPager) mView.findViewById(R.id.trend_lineChart);
List<Entry>[] entries = new ArrayList[2];
entries[1] = dottedLineData;
entries[0] = solidLineData;
int[] cahrtColors = {Color.parseColor("#F0C330"), Color.parseColor("#50C4D9")};

String[] labels = {"TCL", "趋势线"};
boolean[] hasDotted = {true, false};
final LineChartEntity lineChartEntity = new LineChartEntity(lineCharts, entries, labels, hasDotted,
cahrtColors, R.color.black99, 12f);

lineCharts.getAxisLeft().setAxisMaximum(maxData*120f);
lineCharts.getAxisLeft().setAxisMinimum(0f);
lineCharts.getAxisLeft().setGranularity(0.1f);
lineCharts.getLegend().setEnabled(false);
/*设置横坐标的最小宽度*/
lineCharts.getAxisLeft().setMinWidth(25);
lineCharts.getAxisRight().setMinWidth(25);
lineCharts.getXAxis().enableGridDashedLine(10f, 0f, 0f);
lineCharts.getXAxis().setGridLineWidth(0.5f);
lineCharts.getXAxis().setGridColor(Color.parseColor("#9E9E9E"));
lineChartEntity.setAxisFormatter(
new IAxisValueFormatter() {

@Override
public String getFormattedValue(float value, AxisBase axis) {

String xValueTemp = mFormat.format(value);
float transferValue = value;
int index;
{
if (xValueTemp.contains(".")) {
return "";
}
index = (int) value;
index = Math.abs(index);
}

if (index < 0) {
return "";
}

if (index >= dottedLineData.size()) {
return "";
}
String timeTemp = dataList.get(index);
return timeTemp;
}

}, new IAxisValueFormatter() {
@Override
public String getFormattedValue(float value, AxisBase axis) {
return mFormat.format(value) + "%";
}
}
);
lineChartEntity.setLineMode(LineDataSet.Mode.HORIZONTAL_BEZIER);
lineChartEntity.initLegend(Legend.LegendForm.CIRCLE, 13f, Color.parseColor("#999999"));
lineChartEntity.updateLegendOrientation(Legend.LegendVerticalAlignment.TOP, Legend.LegendHorizontalAlignment.RIGHT, Legend.LegendOrientation.HORIZONTAL);
lineCharts.getData().setDrawValues(false);
lineCharts.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
if(dataList.size()>1)
//        lineCharts.getXAxis().setLabelRotationAngle(-30);
lineCharts.getViewTreeObserver().addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() {
@Override
public boolean onPreDraw() {
lineCharts.getViewTreeObserver().removeOnPreDrawListener(this);
int width = lineCharts.getWidth();
if(dataList.size()>0){
String xAxis = dataList.get(0);
int totalWidth = (int) (dataList.size() * lineCharts.getResources().getDisplayMetrics().density * xAxis.length()*9);
float scale = (float) totalWidth / width;
if (scale < 1) {
scale = 1;
}
lineChartEntity.setMinMaxScaleX(scale, scale);
}else{
lineChartEntity.setMinMaxScaleX(1.0f, 1.0f);
}
return false;
}
});

final NewMarkerView markerView = new NewMarkerView(getActivity(), R.layout.custom_marker_view_layout,false);
markerView.setCallBack(new NewMarkerView.CallBack() {
@Override
public void onCallBack(float x, String value) {
int index = (int) x;
if (index >= dataList.size()) {
return;
}

if(!TextUtils.isEmpty(value)){
float data = Float.parseFloat(value);
BigDecimal solid = new BigDecimal(dottedLineData.get(index).getY());
BigDecimal scale = new BigDecimal(100);
float solidInvert = solid.multiply(scale).floatValue();
if(solidInvert==data*100){
markerView.getTvContent().setVisibility(View.VISIBLE);
markerView.getTvContent().setText(dataList.get(index) + "\n" + mFormat.format(data)+ "%");
}
else{
markerView.getTvContent().setVisibility(View.INVISIBLE);
}
}else{
markerView.getTvContent().setText( dataList.get(index)+ "\n" + "%");
}
}
});
lineChartEntity.setMarkView(markerView);
LineDataSet.Mode[] modes = new LineDataSet.Mode[2];
modes[0] =  LineDataSet.Mode.LINEAR;
modes[1] = LineDataSet.Mode.HORIZONTAL_BEZIER;
lineChartEntity.setLineMode(modes);
}

这里基本的属性和前面的设置类似，也有几点改进

1.数据提升精确度，运用BigDecimal

2.不同modes的图形样式（这里是折线和平滑曲线）

这里在lineChartEntity设置

/**
* 设置图表颜色值,组合图
* @param modes LineDataSet.Mode
*/
public void setLineMode (LineDataSet.Mode[] modes) {
List<ILineDataSet> sets = ((LineChart)mChart).getData().getDataSets();
for (int index = 0, len = sets.size(); index < len; index ++) {
LineDataSet set = (LineDataSet) sets.get(index);
if (index < modes.length) {
set.setMode(modes[index]);
}
}
mChart.invalidate();
}

3.markView的显示设置

这里加判断，当点击获取的点在平滑曲线上也就是真实值时才会显示

markView显示格式控制代码

/*部分数据不需要格式化处理*/
public NewMarkerView(Context context, int layoutResource,boolean needFormat) {
super(context, layoutResource);
this.needFormat = needFormat;
tvContent = (TextView) findViewById(R.id.tvContent);
}

@Override
public void refreshContent(Entry e, Highlight highlight) {

String values;
if (e instanceof CandleEntry) {
CandleEntry ce = (CandleEntry) e;
values = "" + Utils.formatNumber(ce.getHigh(), 0, true);
} else {
if(!needFormat){
values=""+e.getY();
}else{
values = "" + Utils.formatNumber(e.getY(), 0, true);
}
}

if (mCallBack != null) {
mCallBack.onCallBack(e.getX(), values);
}
super.refreshContent(e, highlight);
}

4.让折线图看起来像直线（隐藏数据的点）

public LineChartEntity (LineChart lineChart, List<Entry> []entries, String[] labels,boolean[] hasDotted,
int []chartColor, int valueColor, float textSize) {
super(lineChart, entries, labels, chartColor, valueColor, textSize,hasDotted);
this.hasDotted = hasDotted;
}

if (hasDotted!=null&&hasDotted[index]) {
lineDataSet[index].setDrawCircles(false);
lineDataSet[index].setCircleColor(R.color.white);
lineDataSet[index].enableDashedLine(10f, 15f, 0f);
lineDataSet[index].enableDashedHighlightLine(10f, 15f, 0f);
}

四丶跪求关注下载源码，200粉小目标
欢迎关注我的博客及微信公众号，后面会给大家带来更多相关MPAndroidChart无法解决的仿MPAndroidChart图标自定义控件
源码下载记得顺便Star哦~
下载链接：https://github.com/JinBoy23520/MPAndroidChartDemoByJin

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航