好久没写博客了,抱歉抱歉,实在是忙,废话不多说,先说今天的主题:HighChart 的一些简单介绍,还有就是如何在Android端使用,以及大多数朋友都关心的,如何与Android 端后台数据交互,数据的传输相关难点的解决。
首先,新建Android项目,在assets文件夹下新建web文件夹,在web里再放上js,目录如下(先忽略那些js文件):
我们来到布局(由于博主懒直接从项目截取片段勿怪勿怪)
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>
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) + "')");这个也是很关键的,这里不解释太多,仅作为使用HighCharts使用者一个直观参考,因为js知识也好,html知识涉及有点多,讲起来没完没了,题主怕麻烦:P
<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传后台数据就差不多长这样-.-,欢迎交流,有疑问可以留言博主会和大家分享一些细节.
<Garry和图表第二次约会>HighCharts, Android传数据(可以不用ajax你造吗)
原文:http://blog.csdn.net/lrs123123/article/details/44567103