好久沒寫博客了，抱歉抱歉，實在是忙，廢話不多說，先說今天的主題：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傳後臺數據就差不多長這樣-.-，歡迎交流，有疑問可以留言博主會和大家分享一些細節.