Android下相对成熟的使用highcharts折线图的案例

最新推荐文章于 2024-06-15 19:15:07 发布

robinswat007

最新推荐文章于 2024-06-15 19:15:07 发布

阅读量1.5k

点赞数

文章标签： android highcharts null空值处理自定义折线图

本文链接：https://blog.csdn.net/robinswat007/article/details/17694913

版权

先说明，本人是新手，因最近在工作中要开发应用，要在移动设备上动态生成折线图，经过好一番折腾，总算有一个相对完善的案例了。看了很多网上的案例，发现有些细节的地方没有一个很好的解决方法，通过自己的努力，也一步步解决了，特在此分享一下经验。

解决的问题包括：1.标题，单位，x，y轴的自定义；2.数据的自定义和前台处理，包括空值的处理，数据元素的定位。

至于如何于java后台交互的，这类文章很多了，就不在这里说明了。在这里，我主要说一下如何自定义折线图的相关内容，最主要的是json数据的前台处理。

所使用的json数据的处理结果，这里有3列数据，有很典型的null值的出现：

[{"data":"null,6.41,4.15,11.44,12.02,10.36,3.41,4.44,11.46,10.60,18.43","name":"2010"},{"data":"18.43,17.13,23.00,38.53,25.92,18.80,10.33,5.68,6.68,13.31,13.31","name":"2011"},{"data":"0.60,34.86,34.20,35.02,43.30,43.60,37.74,30.99,34.17,2.11,2.11","name":"2012"}]

部分代码：

// 折线图的数据结构,这个参考了网上的案例
	public class Contact
	{
		private String name; // 数值的名称
		private String value; // 数值

		/**
		 * 构造函数
		 * 
		 * @param name
		 *            数据名称
		 * @param value
		 *            数据
		 */
		public Contact(String name, String value)
		{
			this.name = name;
			this.value = value;
		}

		// 下面是实例变量的getters and setters
		public String getName()
		{
			return name;
		}

		public void setName(String name)
		{
			this.name = name;
		}

		public String getValue()
		{
			return value;
		}

		public void setValue(String value)
		{
			this.value = value;
		}
	}

	// javascript接口/

	String _title = "小试牛刀玩一玩", _lable = "1,2,3,4,5,6,7,8,9,10,11,12",
			_Ytext = "增长%", _tipvs = "%";
	double _max = 100, _min = 0;

	// 实现将list转换成json格式字符串
	public String getContacts()
	{
		List<Contact> contacts = contactService.getContact();
		String json = null;
		try
		{
			JSONArray array = new JSONArray();
			for (Contact contact : contacts)
			{
				JSONObject item = new JSONObject();
				item.put("name", contact.getName());
				item.put("data", contact.getValue());
				array.put(item);
			}
			json = array.toString();
			System.out.println(json);
		} catch (JSONException e)
		{
			e.printStackTrace();
		}
		return json;
	}

	// 得到图表标题mtitle
	public String gettitle()
	{
		return _title;
	}

	// 得到图表X轴坐标(_lable格式：2012.2,2012.4,2012.5,2012.6,2012.7,2012.8)_lable
	public String getlable()
	{
		return _lable;
	}

	// 得到Y轴上要显示的字_Ytext
	public String getYtext()
	{
		return _Ytext;
	}

	// 得到提示内容中的单位_tipvs
	public String gettipvs()
	{
		return _tipvs;
	}

	// Y轴最大值
	public double getYmax()
	{
		return _max;
	}

	// Y轴最小值
	public double getYmin()
	{
		return _min;
	}

网页文件：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="highcharts.js"></script>
<script type="text/javascript">
var title=window.MainActivity.gettitle();
var lable=window.MainActivity.getlable();
var Ytext=window.MainActivity.getYtext();
var tipvs=window.MainActivity.gettipvs();
var ymax=window.MainActivity.getYmax();
var ymin=window.MainActivity.getYmin();
var templable=lable.split(",");//将传来的标签转换为字符串数组
var data=new Array();
var contact=window.MainActivity.getContacts();
eval("data="+contact);
var tempdata,tempnewdata,tempname,x;
var newdata=new Array();
var tempnumber;

//以下是重点，如何将后台传来的json数据转换为图表能识别的数组格式！
for(var i=0;i<data.length;i++)
{//转换data格式
	tempname=data[i].name;
	tempdata=data[i].data.split(",");//把字符串转换为数组
	tempnewdata=new Array();
	x=new Array();
	for(var j=0;j<tempdata.length;j++)
	{//json传过来的数据是字符型的,在这里转换为数值型
		
		if(tempdata[j]=="null")
		{
			continue;
		}
		else
		{
			tempnumber=Number(tempdata[j]);//使用number()自动转换类型
			x.push({x:j,y:tempnumber});//这句很重要，x是当前数据在x轴上的位置，比如说x轴从1月（0）起，当前数据是3月，那x就为2；此句的目的是为了解决有空值不能显示的问题~
		}
	}
	newdata.push({name:tempname,data:x});
}


$(function () {
        $('#container').highcharts({
            title: {
                text: title,//自定义标题
                x: -20 //center
            },
            
            xAxis: {
                categories: templable//自定义标签

            },
            yAxis: {
                title: {
                    text: Ytext//y轴的单位
                },
                max:ymax,//最大值,这里在后台处理,得到数组中最大值,再加上5
		min:ymin//最小值,这里得到数组最小值,再减去5
            },
            tooltip: {
                valueSuffix: tipvs//点击数据点后,显示的数据的单位
            },
            legend: {
                layout: 'horizontal',
                align: 'center',
                verticalAlign: 'bottom',
                borderWidth: 0
            },
            series:newdata//处理好的数据数组
        });
    });

</script>
</head>
<body>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<div id="containera" style="text-align:right; size:12pt;"> 点击节点显示数据 </div>
</body>
</html>

最终要得到的结果：不管数据是什么样的情况，有无空值，都能从java后台得到想要的数据~

robinswat007

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Android下相对成熟的使用highcharts折线图的案例

先说明，本人是新手，因最近在工作中要开发应用，要在移动设备上动态生成折线图，经过好一番折腾，总算有一个相对完善的案例了。看了很多网上的案例，发现有些细节的地方没有一个很好的解决方法，通过自己的努力，也一步步解决了，特在此分享一下经验。解决的问题包括：1.标题，单位，x，y轴的自定义；2.数据的自定义和前台处理，包括空值的处理，数据元素的定位。所使用的json数据的处理结果，这里有3
复制链接

扫一扫