<Garry和圖表第二次約會>HighCharts, Android傳數據(可以不用ajax你造嗎)


轉載請注明:http://blog.csdn.net/lrs123123/article/details/44567103

好久沒寫博客了,抱歉抱歉,實在是忙,廢話不多說,先說今天的主題:HighChart 的一些簡單介紹,還有就是如何在Android端使用,以及大多數朋友都關心的,如何與Android 端后台數據交互,數據的傳輸相關難點的解決。


一、HighCharts女主介紹:漂亮的讓人臉紅的HighCharts 

Android端少不了會作為圖標的展示終端,移動端的便捷性,也注定HighCharts和Android會有這么一個邂逅的開始,先介紹下女主HighCharts: HighCharts中文網 ,API文檔是一切,我就這么偷偷告訴你,想泡她先看A(朋) P(友) I (圈),具體怎么看我就不贅言了,有查不到的知識點請留言,我保證不打死你。

二、約會前准備:Android導入HighCharts 

首先,新建Android項目,在assets文件夾下新建web文件夾,在web里再放上js,目錄如下(先忽略那些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


放上html:(html直接放在web目錄下)

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傳后台數據就差不多長這樣-.-,歡迎交流,有疑問可以留言博主會和大家分享一些細節.



注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com