官网：https://www.hcharts.cn/demo/highcharts/bar-basic
效果图：
QQ20180330-153701.png
实现步骤：
1、在官网https://www.hcharts.cn/download下载中心下载软件包，里面包含各种图标的js及html文件，根据具体情况将下载下来的js及html、css文件放入assets文件夹下，本例只实现了横向柱状图：项目目录如下
QQ20180330-154522.png
2、显示图表，只需在html里引入highcharts.js即可
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Highcharts Example</title>
<style type="text/css">
</style>
</head>
<body>
<script src="../../code/highcharts.js"></script>
<script src="../../code/data.js"></script>
<div id="container" style="min-width: 310px; max-width: 800px; height: 600px; margin: 0 auto"></div>
<script type="text/javascript">
<!--// 图表配置-->
var options = {
chart: {
type: 'bar' //指定图表的类型，默认是折线图（line）
},
title: {
text: '' // 标题
},
xAxis: {
title:{
text:'日期/日'
},
categories: ['1', '2', '3','4','5','6','7'] // x 轴分类
},
yAxis: {
title: {
text: '数量/捆' // y 轴标题
}
},
series: [{ // 数据列
name: '数量', // 数据列名
data: [1, 2, 4,5,8,9] // 数据
}]
};
// 图表初始化函数
var chart = Highcharts.chart('container', options);
</script>
</body>
</html>
Activity中加载：
String path = "file:///android_asset/examples/bar-basic/index.htm";
// 启用支持javascript
WebSettings settings = mWebView.getSettings();
settings.setJavaScriptEnabled(true);
settings.setCacheMode(WebSettings.LOAD_DEFAULT);
settings.setDomStorageEnabled(true);
settings.setAppCacheMaxSize(8 * 1024 * 1024);
settings.setAllowFileAccess(true);
settings.setAppCacheEnabled(true);
mWebView.setVerticalScrollBarEnabled(false);
mWebView.setHorizontalScrollBarEnabled(false);
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB) {
mWebView.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
}
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
settings.setLoadsImagesAutomatically(true);
} else {
settings.setLoadsImagesAutomatically(false);
}
mWebView.loadUrl(path);
3、刷新数据
创建data.js，编写刷新方法，用于接收APP端传过来的数据进行重新配置
data.js如下：
function refresh(jsonStr){
if(jsonStr==null){
return;
}
var json = JSON.parse(jsonStr);
// 图表配置
var options = {
chart: {
type: 'bar' //指定图表的类型，默认是折线图（line）
},
title: {
text: '' // 标题
},
xAxis: {
title:{
text:'日期/日'
},
categories: json.categories // x 轴分类
},
yAxis: {
title: {
text: '数量/捆' // y 轴标题
}
},
series: [{ // 数据列
name: '数量', // 数据列名
data: json.datas // 数据
}]
};
// 图表初始化函数
var chart = Highcharts.chart('container', options);
};
在index.html里引入新创建的js文件
<script src="../../code/data.js"></script>
在WebView网页加载完后调用refresh方法，将输入传入js实现刷新功能
//覆盖WebView默认使用第三方或系统默认浏览器打开网页的行为，使网页用WebView打开
mWebView.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 (!mWebView.getSettings().getLoadsImagesAutomatically()) {
mWebView.getSettings().setLoadsImagesAutomatically(true);
}
loadUrl("javascript:refresh('" + getJsData() + "')");//通知js刷新数据
}
});
//需要更新的数据
String getJsData() {
JsData data = new JsData();
data.datas = new int[31];
for (int i = 0; i < 31; i++) {
data.datas[i] = i + 5;
}
data.categories = new String[]{"1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31"};
String json = FastJsonTools.toJson(data);
return json;
}
此时的index.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Highcharts Example</title>
<style type="text/css">
</style>
</head>
<body>
<script src="../../code/highcharts.js"></script>
<script src="../../code/data.js"></script>
<div id="container" style="min-width: 310px; max-width: 800px; height: 600px; margin: 0 auto"></div>
<script type="text/javascript">
//通过data.js来配置数据
</script>
</body>
</html>
实现过程中遇到的问题：ScrollView与WebView嵌套使用的时候，图表会出现显示不全的情况，这时可以通过修改
<div id="container" style="min-width: 310px; max-width: 800px; height: 600px; margin: 0 auto"></div>的height来解决（调低）。
网友评论