Highcharts HTML5交互性图标使用教程-职坐标

Highcharts HTML5交互性图标使用教程

沉沙 2018-07-25 来源：阅读 1473 评论 0

摘要：本篇教程探讨了Highcharts HTML5交互性图标使用，希望阅读本篇文章以后大家有所收获，帮助大家对HTML5的理解更加深入。

本篇教程探讨了Highcharts HTML5交互性图标使用，希望阅读本篇文章以后大家有所收获，帮助大家对HTML5的理解更加深入。

实现步骤：
1、在官网https://www.hcharts.cn/download下载中心下载软件包，里面包含各种图标的js及html文件，根据具体情况将下载下来的js及html、css文件放入assets文件夹下，本例只实现了横向柱状图

2、显示图表，只需在html里引入highcharts.js即可

<!DOCTYPE HTML><html><head>

<title>Highcharts Example</title>

</style></head><body><script src="../../code/highcharts.js"></script><script src="../../code/data.js"></script>

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>

<title>Highcharts Example</title>

</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></body></html>

实现过程中遇到的问题：ScrollView与WebView嵌套使用的时候，图表会出现显示不全的情况，这时可以通过修改
<div id="container" style="min-width: 310px; max-width: 800px; height: 600px; margin: 0 auto"></div>的height来解决（调低）。

本文由职坐标整理发布，欢迎关注职坐标WEB前端HTML5/CSS3频道，获取更多WEB前端知识！

html5 networkerror html5从入门到精通 html5css3教程

本文由 @沉沙发布于职坐标。未经许可，禁止转载。