添加两个折线图

选中可视化插件“Graph”后，添加两个Query

-- 折线1 - Query A

SELECT
  $__time(date),
  '有效算力' as metric,
  quality_adj_power as value
FROM
  analyse_miner_efficient_daily
where 
  miner = '$Actor' and
  $__timeFilter(date)
order by date

-- 折线2 - Query B

SELECT
  $__time(date),
  '每日封装算力' as metric,
  increased_sector_count*sector_size as value
FROM
  analyse_miner_efficient_daily
where miner = '$Actor'and
  $__timeFilter(date)
order by date


添加两条线后的效果如下图



这个时候，我们想要把“每日封装算力”转化成柱状图。

Graph双折线的情况下，将其中一个展示为柱状

在右侧panel找到“Series overrides”区域

添加系列，选中“每日封装算力”，按下列操作顺序操作

操作1：



操作2：



操作3：



操作4：



最后看下效果

1. 将mpandroidchartlibrary-2-1-6.ja包copy到项目的libs中在引用



2:布局文件

 <com.github.mikephil.charting.charts.LineChart
        android:id="@+id/chart1"
        android:layout_marginTop="10dp"
        android:layout_width="match_parent"
        android:layout_height="200dp"
         />



3:后台代码

public class OilReportformsFragment extends Fragment{

	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {
		// TODO Auto-generated method stub		
		//return super.onCreateView(inflater, container, savedInstanceState);
		return inflater.inflate(R.layout.oilreportforms, container, false);
	}
	
	@Override
	public void onActivityCreated(Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		
		//getActivity().getActionBar().setDisplayHomeAsUpEnabled(true); 		
		super.onActivityCreated(savedInstanceState);
		
		
		LineChart  mChart = (LineChart)getActivity().findViewById(R.id.chart1);
		
		
		mChart.setDescription("");
		mChart.setDrawGridBackground(false);

	        
	        ///aj
		mChart.setTouchEnabled(true);
		mChart.setDragEnabled(true);
		mChart.setScaleEnabled(true);
	        
		Typeface mTf = Typeface.createFromAsset(getActivity().getApplicationContext().getAssets(), "OpenSans-Regular.ttf");
	        
	        XAxis xAxis = mChart.getXAxis();
	        xAxis.setPosition(XAxisPosition.BOTTOM);
	        xAxis.setTypeface(mTf);
	        xAxis.setDrawGridLines(false);
	        xAxis.setDrawAxisLine(true);

	        YAxis leftAxis = mChart.getAxisLeft();
	        leftAxis.setTypeface(mTf);
	        leftAxis.setLabelCount(5, false);
	        
	        YAxis rightAxis = mChart.getAxisRight();
	        rightAxis.setTypeface(mTf);
	        rightAxis.setLabelCount(5, false);
	        rightAxis.setDrawGridLines(false);

	        // set data
	        mChart.setData((LineData)generateDataLine(1));

	        // do not forget to refresh the chart
	        // holder.chart.invalidate();
	        mChart.animateX(750);
	}
	
	 private LineData generateDataLine(int cnt) {

	        ArrayList<Entry> e1 = new ArrayList<Entry>();

	        
	        for (int i = 0; i < 12; i++) {
	            e1.add(new Entry((int) (Math.random() * 65), i));
	        }
	       

	        LineDataSet d1 = new LineDataSet(e1, "New DataSet " + cnt + ", (1)");
	        /*   d1.setLineWidth(2.5f);
	        d1.setCircleSize(4.5f);*/
	        
	        d1.setLineWidth(2.5f);
	        d1.setCircleSize(5.5f);//折线的圆点大小
	        d1.setHighLightColor(Color.rgb(244, 117, 117));
	        d1.setDrawValues(true);
	        
	        ArrayList<Entry> e2 = new ArrayList<Entry>();

	        for (int i = 0; i < 12; i++) {
	            e2.add(new Entry(e1.get(i).getVal() - 30, i));
	        }
        
	        ArrayList<LineDataSet> sets = new ArrayList<LineDataSet>();
	        sets.add(d1);
	        
	        //这个图标坐标显示对应的坐标是按照顺序对应的，第一个y对应第一个x,这么来的
	        ArrayList<String> m = new ArrayList<String>();
	        m.add("9:00:37");
	        m.add("9:30:28");
	        m.add("10:00");
	        m.add("10:30");
	        m.add("May");
	        m.add("Jun");
	        m.add("12:00:59");
	        m.add("Aug");
	        m.add("Sep");
	        m.add("Okt");
	        m.add("Nov");
	        m.add("Dec");
	        
	        
	        LineData cd = new LineData(m, sets);
	        return cd;
	    }

	@Override
	public void onCreate(Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		super.onCreate(savedInstanceState);
		setHasOptionsMenu(true);//添加菜单不调用该方法是没有用的
	}
	
	
	public void onCreateOptionsMenu(Menu menu, MenuInflater inflater) {
		// TODO Auto-generated method stub
		menu.clear();
	    inflater.inflate(R.menu.backaj, menu);  		     	       	    
		super.onCreateOptionsMenu(menu, inflater);		
	}
	

	@Override
	public boolean onOptionsItemSelected(MenuItem item) {  
		if(item.getItemId() == android.R.id.home)
		{ 
			getActivity().getActionBar().setDisplayHomeAsUpEnabled(false); 
			MainActivity mc =(MainActivity)getActivity();
			mc.switchContent(this,getActivity().getSupportFragmentManager().findFragmentByTag("more"),"");
		}	
		if(item.getItemId() == R.id.action_back)
		{ 
			MainActivity mc =(MainActivity)getActivity();
			mc.switchContent(this,getActivity().getSupportFragmentManager().findFragmentByTag("more"),"");
		}
	    return true;
	} 
}





4:常见异常处理
Typeface mTf = Typeface.createFromAsset(getActivity().getApplicationContext().getAssets(), "OpenSans-Regular.ttf");

java.lang.RuntimeException: native typeface cannot be made

需要把对应的文件复制到assets目录里边不然找不到这里的文件是OpenSans-Regular.ttf


5:mpandroidchart开源git地址
https://github.com/PhilJay/MPAndroidChart

git文档
https://github.com/PhilJay/MPAndroidChart/wiki



6:android mpandroidchart 设置y抽不从0开始,让y轴更具坐标自适应

YAxis yal =mChart.getAxisLeft();
		yal.setStartAtZero(false);
		
		YAxis yar =mChart.getAxisRight();
		yar.setStartAtZero(false);

文章目录
Echarts常用图表
折线图
1. 折线图的实现步骤
2. 折线图的常见效果
最大值\最小值 `markPoint`
平均值 `markLine`
标注区间 `markArea`
数值显示 `label`
平滑线条`smooth`
线条样式`linestyle`
填充风格 `areaStyle`
紧挨边缘`boundaryGap`
配置缩放比例 `scale`
堆叠图
3. 通用配置
标题：`title`
提示框：`tooltip`
工具按钮：`toolbox`
图例：`legend`

Echarts常用图表



每个图表均配有对应的源代码以及知识点~~~~

详情可点开对应的图表学习！

各类常用图表总结在此！配合使用更方便~

https://blog.csdn.net/diviner_s/article/details/116072584

官方对应文件工具，有更详细的工具使用方法：

https://echarts.apache.org/zh/option.html

折线图
折线图更多的使用来呈现数据随时间的变化趋势
1. 折线图的实现步骤
1.先上Echarts经典基本代码框架~~
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="echarts.min.js"></script> # 自己找文件位置
</head>
<body>
    <div style="width: 600px;height: 400px"></div>
    <script>
        var mCharts = echarts.init(document.querySelector("div"))
        var option = {}
        mCharts.setOption(option)
    </script>
</body>
</html>

此时option对象是空的。
2.准备数据：

x轴：

		var xDataArr = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']


y轴：

		var yDataArr = [3000, 2800, 900, 1000, 800, 700, 1400, 1300, 900, 1000, 800, 600]


准备option，将series中的type的值设置为：line（区别于柱状图，柱状图为bar）

var option = {
        xAxis:{
            type:'category',
            data:xDataArr
        },
        yAxis:{
            type:'value'
        },
        series:[
            {
                type:'line',
                data:yDataArr
            }
        ]
    }

最终效果图如下：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="echarts.min.js"></script>
</head>
<body>
<div style="width: 600px;height: 400px"></div>
<script>
    var mCharts = echarts.init(document.querySelector("div"))
    var xDataArr = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
   var yDataArr = [3000, 2800, 900, 1000, 800, 700, 1400, 1300, 900, 1000, 800, 600]
    var option = {
        xAxis:{
            type:'category',
            data:xDataArr
        },
        yAxis:{
            type:'value'
        },
        series:[
            {
                type:'line',
                data:yDataArr
            }
        ]
    }
    mCharts.setOption(option)
</script>
</body>
</html>

2. 折线图的常见效果
最大值\最小值 markPoint
series: [
	{
		......
		markPoint: {
			data: [
				{
					type: 'max', 
					name: '最大值'
				},
				{
					type: 'min', 
					name: '最小值'
				}
			]
		}
	}
]


平均值 markLine
series: [
	{
		......
		markLine: {
			data: [
				{
					type: 'average', 
					name: '平均值'
				}
			]
		}
	}
]


标注区间 markArea
    var option = {
        series: [
            {
                ......
                markArea: {
        			data: [
	        			[
	                		{
	                    		xAxis: '1月'
	                		}, {
	                			xAxis: '2月'
	            			}
	            		],
	            		[
	                		{
	                    		xAxis: '7月'
	                		}, {
	                			xAxis: '8月'
		            		}
	            		]
        			]
  		  		}
   			}
    	]
    }


数值显示 label
series: [
	{
		......
		label: {
			show: true,	// 是否可见
			rotate: 0 	// 旋转角度
		}
	}
]


平滑线条smooth
series: [
	{
		......
		smooth:true
	}
]


线条样式linestyle
var option = {
        series:[
            {
            	......
                smooth: true,
               	lineStyle:{
               		color: 'green',
               		type: 'dashed'//可选值还有 dotted  solid
               	}
            }
        ]
    }


填充风格 areaStyle
var option = {
	series: [
		{
			type: 'line',
			data: yDataArr,
			areaStyle: {
			color: 'pink'
			}
		}
	]
}


紧挨边缘boundaryGap
boundaryGap 是设置给 x 轴的, 让起点从 x 轴的0坐标开始
var option = {
	xAxis: {
		type: 'category',
		data: xDataArr,
		boundaryGap: false
	}
}


配置缩放比例 scale
如果每一组数据之间相差较少，并且都比0大很多，那么可能存在下种情况。
var yDataArr = [3005, 3003, 3001, 3002, 3009, 3007, 3003, 3001, 3005,
3004, 3001, 3009] // 此时y轴的数据都在3000附近, 每个数之间相差不多
var option = {
	xAxis: {
		type: 'category',
		data: xDataArr
	},
	yAxis: {
		type: 'value'
	},
	series: [
		{
			type: 'line',
			data: yDataArr
		}
	]
}



为此我们使用scale，摆脱从零开始。

将scale配置给y轴，控制比例
var option = {
	yAxis: {
		type: 'value',
		scale: true
	}
}


堆叠图
堆叠图指的是, 同个类目轴上系列配置相同的 stack 值后，后一个系列的值会在前一个系列的值上相加

如果在一个图表中有两个或者多个折线图, 在没有使用堆叠配置的时候, 效果如下:
3. 通用配置
使用 ECharts 绘制出来的图表, 自带一些功能, 这些功能是每一个图表都具备的, 我们可以通过配置, 对这些功能进行设置.
<script>
	var mCharts = echarts.init(document.querySelector("div"))
	var xDataArr = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
	var yDataArr1 = [120, 132, 101, 134, 90, 230, 210]
	var yDataArr2 = [20, 82, 191, 94, 290, 330, 310]
	var option = {
		xAxis: {
			type: 'category',
			data: xDataArr
		},
		yAxis: {
			type: 'value',
			scale: true
		},
		series: [
			{
				type: 'line',
				data: yDataArr1
			},
			{
				type: 'line',
				data: yDataArr2
			}
		]
	}
	mCharts.setOption(option)
</script>



使用了堆叠图后：
var option = {
	series: [
		{
			type: 'line',
			data: yDataArr1,
			stack: 'all' // series中的每一个对象配置相同的stack值, 这个all可以任意写
		},
		{
			type: 'line',
			data: yDataArr2,
			stack: 'all' // series中的每一个对象配置相同的stack值, 这个all可以任意写
		}
	]
}



蓝色这条线的y轴起点, 不再是y轴, 而是红色这条线对应的点. 所以相当于蓝色是在红色这条线的基础之上进行绘制. 基于前一个图表进行堆叠。
标题：title
var option = {
      title: { // 标题设置
        text: '成绩展示', // 标题文字
        textStyle: { // 标题文字样式设置
          color: 'red'
        },
        borderWidth: 5, // 标题边框宽度
        borderColor: 'blue', // 标题边框颜色
        borderRadius: 5, // 标题边框圆角
        left: 50, // 标题距离左边的距离
        top: 10 // 标题距离顶部的距离
      }
 }

提示框：tooltip
tooltip指的是当鼠标移入到图表或者点击图表是，展示出的提示框

触发类型：tigger

可选值有item\axis
触发时机：triggerOn

可选值有 mouseOver\click
格式化显示：formatter

字符串模板



var option = {
	tooltip: {
		trigger: 'item',
		triggerOn: 'click',
		formatter: '{b}:{c}'
	}
}
这个{b} 和 {c} 所代表的含义不需要去记, 在官方文档中有详细的描述



回调函数

var option = {
	tooltip: {
		trigger: 'item',
		triggerOn: 'click',
		formatter: function (arg) {
			return arg.name + ':' + arg.data
		}
	}
}

工具按钮：toolbox
toolbox 是ECharts提供的工具栏，内置有导出图片，数据视图, 重置, 数据区域缩放, 动态类型切换五个工具
工具栏的按钮是配置在 feature 的节点之下
var option = {
	toolbox: {
		feature: {
			saveAsImage: {}, // 将图表保存为图片
			dataView: {}, // 是否显示出原始数据
			restore: {}, // 还原图表
			dataZoom: {}, // 数据缩放
			magicType: { // 将图表在不同类型之间切换,图表的转换需要数据的支持
				type: ['bar', 'line']
			}
		}
	}
}

图例：legend
legend是图例，用于筛选类别，需要和series配合使用

legend中的data是一个数组
legend 中的data的值需要和series数组中的某组数据的name值一致


声明：学习内容来自黑马程序员，为学习笔记。仅供学习交流。

Android图表 MPAndroidChart折线图


标签： androidchartmpandroid图表折线图
2016-12-14 09:40 4471人阅读 评论(27) 收藏 举报



 分类：

开源项目（2） 



版权声明：本文为博主原创文章，转载请注明出处。




目录(?)[+]





1.介绍

MPAndroidChart GitHub地址

Demo GitHub地址

MPAndroidChart的强大之处就不在多说了，目前最新的版本是3.0.1，在新版本中很多方法都被弃用了，这个要注意一下，在网上查到的大多数资料都是关于旧版本的，今天来实现一下折线图，把过程记录下来，分享给大家。

效果图：



2.引入开源库
在项目根目录的build.gradle文件中加入如下代码
allprojects {
    repositories {
        maven { url "https://jitpack.io" }
    }
}
1
2
3
4
5
1
2
3
4
5
在app根目录的buil.gradle文件中加入依赖
dependencies {
    compile 'com.github.PhilJay:MPAndroidChart:v3.0.1'
}
1
2
3
1
2
3

3.实现

在项目中，我把图表相关的功能抽取成了一个工具类ChartUtils。

初始化图表

initChart方法用来设置图表的功能和显示的样式，方法中注释了缩放和动画的代码，如果要使用动画，则不需要调用图表的invalidate方法。
/**
 * 初始化图表
 *
 * @param chart 原始图表
 * @return 初始化后的图表
 */
public static LineChart initChart(LineChart chart) {
    // 不显示数据描述
    chart.getDescription().setEnabled(false);
    // 没有数据的时候，显示“暂无数据”
    chart.setNoDataText("暂无数据");
    // 不显示表格颜色
    chart.setDrawGridBackground(false);
    // 不可以缩放
    chart.setScaleEnabled(false);
    // 不显示y轴右边的值
    chart.getAxisRight().setEnabled(false);
    // 不显示图例
    Legend legend = chart.getLegend();
    legend.setEnabled(false);
    // 向左偏移15dp，抵消y轴向右偏移的30dp
    chart.setExtraLeftOffset(-15);

    XAxis xAxis = chart.getXAxis();
    // 不显示x轴
    xAxis.setDrawAxisLine(false);
    // 设置x轴数据的位置
    xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);
    xAxis.setTextColor(Color.WHITE);
    xAxis.setTextSize(12);
    xAxis.setGridColor(Color.parseColor("#30FFFFFF"));
    // 设置x轴数据偏移量
    xAxis.setYOffset(-12);

    YAxis yAxis = chart.getAxisLeft();
    // 不显示y轴
    yAxis.setDrawAxisLine(false);
    // 设置y轴数据的位置
    yAxis.setPosition(YAxis.YAxisLabelPosition.OUTSIDE_CHART);
    // 不从y轴发出横向直线
    yAxis.setDrawGridLines(false);
    yAxis.setTextColor(Color.WHITE);
    yAxis.setTextSize(12);
    // 设置y轴数据偏移量
    yAxis.setXOffset(30);
    yAxis.setYOffset(-3);
    yAxis.setAxisMinimum(0);

    //Matrix matrix = new Matrix();
    // x轴缩放1.5倍
    //matrix.postScale(1.5f, 1f);
    // 在图表动画显示之前进行缩放
    //chart.getViewPortHandler().refresh(matrix, chart, false);
    // x轴执行动画
    //chart.animateX(2000);
    chart.invalidate();
    return chart;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

设置图表数据

setChartData方法用来设置图表显示的数据，以及折线的属性。
/**
 * 设置图表数据
 *
 * @param chart  图表
 * @param values 数据
 */
public static void setChartData(LineChart chart, List<Entry> values) {
    LineDataSet lineDataSet;

    if (chart.getData() != null && chart.getData().getDataSetCount() > 0) {
        lineDataSet = (LineDataSet) chart.getData().getDataSetByIndex(0);
        lineDataSet.setValues(values);
        chart.getData().notifyDataChanged();
        chart.notifyDataSetChanged();
    } else {
        lineDataSet = new LineDataSet(values, "");
        // 设置曲线颜色
        lineDataSet.setColor(Color.parseColor("#FFFFFF"));
        // 设置平滑曲线
        lineDataSet.setMode(LineDataSet.Mode.CUBIC_BEZIER);
        // 不显示坐标点的小圆点
        lineDataSet.setDrawCircles(false);
        // 不显示坐标点的数据
        lineDataSet.setDrawValues(false);
        // 不显示定位线
        lineDataSet.setHighlightEnabled(false);

        LineData data = new LineData(lineDataSet);
        chart.setData(data);
        chart.invalidate();
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

更新图表

notifyDataSetChanged方法用来更新图表，可以动态的显示x轴标签。
/**
 * 更新图表
 *
 * @param chart     图表
 * @param values    数据
 * @param valueType 数据类型
 */
public static void notifyDataSetChanged(LineChart chart, List<Entry> values,
                                        final int valueType) {
    chart.getXAxis().setValueFormatter(new IAxisValueFormatter() {
        @Override
        public String getFormattedValue(float value, AxisBase axis) {
            return xValuesProcess(valueType)[(int) value];
        }
    });

    chart.invalidate();
    setChartData(chart, values);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

x轴数据处理

xValuesProcess方法用于处理x轴数据。 

x轴可以显示三种类型的数据，分别是今日数据、本周数据、本月数据。
/**
 * x轴数据处理
 *
 * @param valueType 数据类型
 * @return x轴数据
 */
private static String[] xValuesProcess(int valueType) {
    String[] week = {"周日", "周一", "周二", "周三", "周四", "周五", "周六"};

    if (valueType == dayValue) { // 今日
        String[] dayValues = new String[7];
        long currentTime = System.currentTimeMillis();
        for (int i = 6; i >= 0; i--) {
            dayValues[i] = TimeUtils.dateToString(currentTime, TimeUtils.dateFormat_day);
            currentTime -= (3 * 60 * 60 * 1000);
        }
        return dayValues;

    } else if (valueType == weekValue) { // 本周
        String[] weekValues = new String[7];
        Calendar calendar = Calendar.getInstance();
        int currentWeek = calendar.get(Calendar.DAY_OF_WEEK);

        for (int i = 6; i >= 0; i--) {
            weekValues[i] = week[currentWeek - 1];
            if (currentWeek == 1) {
                currentWeek = 7;
            } else {
                currentWeek -= 1;
            }
        }
        return weekValues;

    } else if (valueType == monthValue) { // 本月
        String[] monthValues = new String[7];
        long currentTime = System.currentTimeMillis();
        for (int i = 6; i >= 0; i--) {
            monthValues[i] = TimeUtils.dateToString(currentTime, TimeUtils.dateFormat_month);
            currentTime -= (4 * 24 * 60 * 60 * 1000);
        }
        return monthValues;
    }
    return new String[]{};
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

在Activity中使用
ChartUtils.initChart(chart);
ChartUtils.notifyDataSetChanged(chart, getData(), ChartUtils.dayValue);
1
2
1
2

布局文件
<com.github.mikephil.charting.charts.LineChart
        android:id="@+id/chart"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
1
2
3
4
1
2
3
4

4.遇到的问题


在设置x轴水平方向平移时，xAxis.setXOffset()方法不起作用，这让我研究了好长时间，最后无奈使用图表平移方法chart.setExtraLeftOffset()来抵消y轴的平移，已经提交到了Issues上，有解答会在博客中更新。


目前y轴数据只能通过设置最大值、最小值、显示个数的方式来显示数据（如果不设置会自动计算），还没有找到自定义显示数据的方法，有了解的小伙伴可以留言告诉我啊。


自定义x轴数据的时候记得要算好对应的值，Demo中只用到了7个点，所以比较简单，但是x轴数据比较多的话，就要算一下了，如果有不懂的地方可以给我留言或者发私信。

5.写在最后

在实现的过程中，MPAndroidChart的Issues帮了不少忙，有很多人和我遇到了同样的问题，原来没有查阅Issues的习惯，又get新技能一枚。

官方文档

完整的Demo下载

Demo GitHub地址