Android客戶端使用highcharts進行圖表展示
來自： http://blog.csdn.net//guijiaoba/article/details/50493619
Android客戶端使用highcharts進行圖表展示
前面用過MPAndroidChart作為安卓客戶端的圖表展示庫，以前的博客地址，這個是Github地址，但是領導說客戶端的圖表展示最好不用使用Native，然后推薦了一款Web 圖表展示的庫highcharts，進過嘗試，發現效果還不錯，這樣滿足了Android客戶端和iOS客戶端顯示圖表UI一致性，而且代碼只需要一套，只需要在對應客戶端把json數據發送給網頁即可，廢話少說，先給出效果圖。
集成步驟
官方Demo
根據官方的Demo和效果編輯器，選擇自己想要的效果，然后可以按照想要的效果進行編輯。
http://www.hcharts.cn/demo/index.php?p=10
http://www.hcharts.cn/test/index.php?from=demo&p=55
最終網頁的代碼是這樣的：
<!doctype html> <html lang="en"> <head> <script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script> <script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script> <script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/exporting.js"></script> <script> //左側Javascript代碼 </script> </head> <body> <div id="container" style="min-width:700px;height:400px"></div> </body> </html>
然后在<script>//左側Javascript代碼 </script> 里面填上你自己想要的js代碼就可以了，下面的是官方的demo。
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'My first Highcharts chart'
},
xAxis: {
categories: ['my', 'first', 'chart']
},
yAxis: {
title: {
text: 'something'
}
},
series: [{
name: 'Jane',
data: [1, 0, 4]
}, {
name: 'John',
data: [5, 7, 3]
}]
});
});
資源文件放在客戶端
上面的網頁文件顯示每次需要加載jquery-1.8.3.min.js和highcharts.js，由于網絡速度問題，為了加快加載速度，需要把這個兩個文件放到本地，然后把所有必要的所有的文件放到assets中，下面是我自己的文件。
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
<div id="container" style='backgroundcolor:#ffffff'>
</div>
</body>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/highcharts.js"></script>
<script type="text/javascript" src="js/data.js" charset="utf-8"></script>
</html></pre>
data.js就是自己需要展示數據的代碼。
$(function () {
refresh(null);
});
function refresh(jsonStr){
if(jsonStr==null){
return;
}
var json = JSON.parse(jsonStr);
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Highcharts'
},
xAxis: {
categories: json.categories
},
yAxis:[{
labels: {
format: '{value}￥'
},
title: {
text: '單價'
}
},{
labels: {
format: '{value}%'
},
title: {
text: '比率'
},
opposite: true
}],
series: [{
color: '#4572A7',
type: 'spline',
yAxis: 1,
name: '單價',
data: json.series[0].data,
tooltip: {
valueSuffix: '￥'
}
}, {
color: '#89A54E',
type: 'spline',
name: '比率',
data: json.series[1].data,
tooltip: {
valueSuffix: '%'
}
}],
credits:{
enabled:false
}
});
};</pre>
Android代碼
下面介紹如何加載網頁，以及如何刷新數據。由于就是顯示一個網頁，只需要在Activity中添加一個WebView即可。
layout資源文件
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context="cn.mycommons.hchartsdemo.MainActivity">
<Button android:id="@+id/button" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Button" />
<WebView android:id="@+id/webView" android:layout_width="match_parent" android:layout_height="match_parent" />
</LinearLayout>
然后是Java代碼，代碼里面定義每次點擊按鈕，就在Java層隨機生成一些數據，然后把這些數據轉成json字符串
public class MainActivity extends AppCompatActivity {
WebView webView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
findViewById(R.id.button).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
loadUrl("javascript:refresh('" + getJsData() + "')");
}
});
webView = (WebView) findViewById(R.id.webView);
//覆蓋WebView默認使用第三方或系統默認瀏覽器打開網頁的行為，使網頁用WebView打開
webView.setWebViewClient(new WebViewClient() {
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
// 返回值是true的時候控制去WebView打開，為false調用系統瀏覽器或第三方瀏覽器
view.loadUrl(url);
return true;
}
@Override
public void onPageFinished(WebView view, String url) {
if (!webView.getSettings().getLoadsImagesAutomatically()) {
webView.getSettings().setLoadsImagesAutomatically(true);
}
}
});
// 啟用支持javascript
WebSettings settings = webView.getSettings();
settings.setJavaScriptEnabled(true);
settings.setCacheMode(WebSettings.LOAD_DEFAULT);
settings.setDomStorageEnabled(true);
settings.setAppCacheMaxSize(8 * 1024 * 1024);
settings.setAllowFileAccess(true);
settings.setAppCacheEnabled(true);
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB) {
webView.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
}
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
settings.setLoadsImagesAutomatically(true);
} else {
settings.setLoadsImagesAutomatically(false);
}
// 加載網頁文件
loadUrl("file:///android_asset/index.html");
}
void loadUrl(final String url) {
runOnUiThread(new Runnable() {
@Override
public void run() {
webView.loadUrl(url);
}
});
}
String getJsData() {
JsData data = new JsData();
data.categories = new String[]{"春", "夏", "秋", "冬"};
data.series = new YData[2];
Random random = new Random();
for (int i = 0; i < data.series.length; i++) {
data.series[i] = new YData();
data.series[i].name = "Name" + (i + 1);
int j = i;
data.series[i].data = new int[]{100 * j + random.nextInt(100), 100 * j + random.nextInt(100), 100 * j + random.nextInt(100), 100 * j + random.nextInt(100)};
}
String json = new Gson().toJson(data);
System.out.println("json = " + json);
return json;
}
}</pre>
當json字符串生成時候，再調用loadUrl("javascript:refresh('" + getJsData() + "')"); 傳遞給網頁，這樣網頁就能刷新表格了。
在下面是json結構體。
class JsData {
String[] categories;
YData[] series;
}
class YData {
String name;
int[] data;
}</pre>
當數據到底js層時候，先把json字符串轉成Json對象，然后進行適當復制，刷新下界面即可。
$(function () { refresh(null);
});function refresh(jsonStr){ if(jsonStr==null){
return;
}
var json = JSON.parse(jsonStr);
$('#container').highcharts({
chart: {
type: 'column' },
title: {
text: 'Highcharts' },
xAxis: {
categories: json.categories
},
yAxis:[{
labels: {
format: '{value}￥' },
title: {
text: '單價' }
},{
labels: {
format: '{value}%' },
title: {
text: '比率' },
opposite: true }],
series: [{
color: '#4572A7',
type: 'spline',
yAxis: 1,
name: '單價',
data: json.series[0].data,
tooltip: {
valueSuffix: '￥' }
}, {
color: '#89A54E',
type: 'spline',
name: '比率',
data: json.series[1].data,
tooltip: {
valueSuffix: '%' }
}],
credits:{
enabled:false }
});
};
總結
實際上現在移動客戶端有很多優秀的圖表展示框架，比如前面提到的MPAndroidChart。MPAndroidChart的動畫效果簡直是吊炸天。但是有時候可以犧牲吊炸天，使用較為低效的web界面來展示圖表。
優點：
集成簡單，公司內部Web前端工程師較多，遇到復雜難題，可以進行交流討論。
Android，iOS，Web三個界面，可以做到UI統一，用戶沒有學習成本。
Android，iOS客戶端可以使用同樣一套代碼(html+js)。
缺點：
展示較慢，因為是WebView展示，多少會比Native卡頓許多。
問答：
有人問，為什么不直接使用一個H5頁面，并且使用Native加載數據，然后再由Native傳遞json給Webview。
答：其實這樣也是可以的，但是有些客戶端加載數據不一定是走http協議，那么由H5加載則需要添加新的接口。有的客戶端加載數據，需要傳遞session和cookies，比較麻煩，所以我在這邊選擇了Native加載數據的方式。
</div>