<Garry和图表第二次约会>HighCharts, Android传数据（可以不用ajax你造吗）
浏览数：57 /
时间：2015年06月11日
转载请注明：http://blog.csdn.net/lrs123123/article/details/44567103
我们使用webview作为容器来加载html页面（我们还没写），接下来就是html页面，这里我们选用一个柱状图来作为示例，先附上效果图：
项目是使用Netroid来进行一些网络请求，这一点和本主题无关但是朋友们是不可以直接用webview直接loadUrl来传数据的（博主试过，貌似不行所以采用项目里的现成），应该要写在http请求里，再放上html吧，这个也是比较关键的一点。
好久没写博客了，抱歉抱歉，实在是忙，废话不多说，先说今天的主题：HighChart 的一些简单介绍，还有就是如何在Android端使用，以及大多数朋友都关心的，如何与Android 端后台数据交互，数据的传输相关难点的解决。
一、HighCharts女主介绍：漂亮的让人脸红的HighCharts
Android端少不了会作为图标的展示终端，移动端的便捷性，也注定HighCharts和Android会有这么一个邂逅的开始，先介绍下女主HighCharts：HighCharts中文网 ，API文档是一切，我就这么偷偷告诉你，想泡她先看A(朋) P(友) I (圈)，具体怎么看我就不赘言了，有查不到的知识点请留言，我保证不打死你。二、约会前准备：Android导入HighCharts
首先，新建Android项目，在assets文件夹下新建web文件夹，在web里再放上js，目录如下(先忽略那些js文件)：
三、Android端配置
我们来到布局(由于博主懒直接从项目截取片段勿怪勿怪)
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<WebView
android:id="@+id/wv_underrank"
android:layout_width="match_parent"
android:layout_weight="10"
android:layout_height="0dp"></WebView>
</LinearLayout>我们使用webview作为容器来加载html页面（我们还没写），接下来就是html页面，这里我们选用一个柱状图来作为示例，先附上效果图：
Java关键代码：
webview部分：
mWvUnderRank.setBackgroundColor(Color.TRANSPARENT);
mWvUnderRank.setOnTouchListener(new View.OnTouchListener() {
@Override
public boolean onTouch(View view, MotionEvent event) {
return (event.getAction() == MotionEvent.ACTION_MOVE);
}
});
mWvUnderRank.setVerticalScrollBarEnabled(false);
mWvUnderRank.setHorizontalScrollBarEnabled(false);
mWvUnderRank.getSettings().setJavaScriptEnabled(true);
mWvUnderRank.loadUrl("file:///android_asset/web/underRank.html");
mWvUnderRank.setWebChromeClient(new WebChromeClient() {
@Override
public void onConsoleMessage(String message, int lineNumber, String sourceID) {
super.onConsoleMessage(message, lineNumber, sourceID);
}
@Override
public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
return super.onJsAlert(view, url, message, result);
}
});
mWvUnderRank.setWebViewClient(new WebViewClient() {
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
return super.shouldOverrideUrlLoading(view, url);
}
@Override
public void onPageFinished(WebView view, String url) {
super.onPageFinished(view, url);
// mWvUnderRank.loadUrl("javascript:showLoading()");
getUnderRank();
}
});传数据部分：
String legend = "我是Demo哦";
String seriesname = "seriesname是我";
List<String> yAxis = new ArrayList<String>();
List<Integer> seriesdata = new ArrayList<Integer>();
yAxis.add("我是A货");
yAxis.add("我是B货");
yAxis.add("我是C货");
yAxis.add("我是D货");
seriesdata.add(10);
seriesdata.add(20);
seriesdata.add(30);
seriesdata.add(40);
String textUnit = "什么鬼（个）";
String unit = " 个 ";
UnderRankChart underRank = new UnderRankChart(legend, seriesname, yAxis, seriesdata,textUnit,unit);
mWvUnderRank.loadUrl("javascript:showData('" + mGson.toJson(underRank) + "')");项目是使用Netroid来进行一些网络请求，这一点和本主题无关但是朋友们是不可以直接用webview直接loadUrl来传数据的（博主试过，貌似不行所以采用项目里的现成），应该要写在http请求里，再放上html吧，这个也是比较关键的一点。
四、HighCharts的约会穿衣Html
这个也是很关键的，这里不解释太多，仅作为使用HighCharts使用者一个直观参考，因为js知识也好，html知识涉及有点多，讲起来没完没了，题主怕麻烦：P
underRank.html:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="UTF-8" name="viewport"
content="width=device-width,initial-scale=1.0,maximum-scale=1, user-scalable=no">
<STYLE>
body{ margin:0 !important;}
span{ position:absolute; top:50%; left:40%; z-index:10; display:none; }
// #container{ margin:0 auto; position:relative; }
</STYLE>
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/highcharts.js"></script>
<script src="js/exporting.js"></script>
<script src="js/no-data-to-display.js"></script>
<script type="text/javascript">
var container;
var options1 = {
lang:{
loading:"正在努力加载ing",
noData:"暂时没有数据"
},
noData: {
style: {
fontWeight: 'bold',
fontSize: '15px',
color: '#303030'
}
},
chart: {
type: 'bar',
marginRight:5,
renderTo:'container'
},
exporting: {
enabled:false
},
title: {
text: '',
align: 'left',
style: {
fontSize: 12,
fontWeight: 'bold'
},
margin:10
},
xAxis: {
categories: [],
labels: {
style: {
fontSize:10
}
}
},
yAxis: {
min: 0,
title: {
text: '',
align: 'high'
},
labels: {
overflow: 'justify'
},
tickPixelInterval: 100
},
tooltip: {
valueSuffix: ' %'
},
legend: {
align: 'right',
verticalAlign: 'top'
},
exporting: {
enabled:false
},
credits: {
enabled:false
},
series: [{
name: '',
data: []
}]
};
$(function () {
$("#container").height($(window).height());
container = new Highcharts.Chart(options1);
});
function showData(value) {
var data = JSON.parse(value);
//alert(data.seriesdata);
options1.series[0].data =data.seriesdata;
options1.series[0].name =data.seriesname;
options1.title.text = data.legend;
options1.yAxis.title.text = data.textunit;
options1.tooltip.valueSuffix = data.unit;
options1.xAxis.categories = data.yAxis;
container = new Highcharts.Chart(options1);
};
</script>
</head>
<body>
<div id="container" ></div>
</body>
</html>好啦，不用ajax传后台数据就差不多长这样-.-，欢迎交流，有疑问可以留言博主会和大家分享一些细节.
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
