使用Android原生WebView+Highcharts实现可左右滑动的折线图
目录
- 前言
- 开发的思路如下：
- （一）设计Android端的View层
- （二）设计与JS交互的方法
- （三）开发html以及js逻辑
- 总结
前言
今天的内容是使用Android原生webview配合Highcharts开发折线图左右滑动的功能，折线图有很多优秀的第三方库可以使用，比如MPAndroidChart、Highcharts，MPAndroidChart可以通过拉伸折线图界面进行滑动折线图，亲测有效，现在我要讲的是如何使用内嵌html页面进行滑动折线图的开发。效果以及源码目录结构如下图，源码地址：gitee.com/fjjxxy/slid…
开发的思路如下：
1.编写activity，内含一个webview控件
2.编写工具类，与js进行交互，传输一些数据（例如网络请求需要的参数）
3.编写html与js代码，通过Android与js约定好的方法名进行数据的获取，完成Android与js的交互
4.调整html中div的宽度，达到自己想要的滑动以及折线图效果
（一）设计Android端的View层
activity_main.xml代码如下：
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<WebView
android:id="@+id/webView"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
MainActivity.java代码如下:如果想与js进行交互，不要忘了加上第17行进行数据传输
public class MainActivity extends AppCompatActivity {
private WebView mWebView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mWebView = findViewById(R.id.webView);
initWebView(new HashMap<>());
}
public void initWebView(Map<String, String> map) {
// 启用支持javascript
WebSettings settings = mWebView.getSettings();
settings.setJavaScriptEnabled(true);
mWebView.setVerticalScrollBarEnabled(false);
mWebView.addJavascriptInterface(new JsDataUtils(map), "android");
mWebView.loadUrl("file:///android_asset/line.html");
}
}
（二）设计与JS交互的方法
JsDataUtils.java的代码如下，通过@JavascriptInterface与js进行交互，传输数据，这里传输的是网络请求需要的参数，到时候可以在js中使用ajax请求数据并绘制折线图，但是我们这里为了方便，只用模拟数据进行演示
public class JsDataUtils {
private Map<String, String> map;
private Gson mGson = new Gson();
/**
* 通过构造函数像js传递网络请求的参数,以map作为容器，后面再转成字符串
*
* @param map
*/
public JsDataUtils(Map<String, String> map) {
this.map = map;
}
@JavascriptInterface
public String stringToHtml()
{
return mGson.toJson(map);
}
}
（三）开发html以及js逻辑
line.html代码如下：这里通过调整div的宽度决定折线图X轴的间隔划分，已知如果不进行间隔设置的话默认是均分
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<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/jquery.mCustomScrollbar.min.js"></script>
<script src="js/line.js"></script>
</head>
<body>
<div id="container" style="width:2000px;height:400px;"></div>
<script type="text/javascript" src="js/line.js" charset="utf-8"></script>
</body>
</html>
line.js代码如下：14-22行是进行ajax请求数据，最后在chart的series中的data属性进行赋值绘制，这里使用测试数据进行演示，第6行是获取activity中传输的数据
var newArray=new Array();
var chart=null;
$(document).ready(function() {
//通过Android方法来获取参数map,转成json对象获取参数
var mapJson=android.stringToHtml();
var map=JSON.parse(mapJson);
function ajax_data() {
//这里先用死数据进行测试，网络请求可以使用下面的ajax
var dataArr = [400,-500,300,200,400,-500,300,200,400,-500,300,200,400,-500,300,200,
400,-500,300,200,400,-500,300,200,400,-500,300,200,400,-500,300,200,
400,-500,300,200,400,-500,300,200,400,-500,300,200,400,-500,300,200,
400,-500,300,200,400,-500,300,200,400,-500,300,200,400,-500,300,200];
/*$.ajax({
type : "GET",
url : "",//网络请求接口地址
async : false,
dataType : "json",
success : function(data){
//这里处理返回的数据，即data
}
});*/
return dataArr;
}
chart = Highcharts.chart('container', {
legend: {
align: 'left',
verticalAlign: 'top',
x: 70,
y: -12,
itemDistance: 1,
itemStyle: {color:'#666', fontWeight:'normal' }
},
title: {text: ''},
credits: {enabled: false},
xAxis: [{
categories: [],
crosshair: true,
tickmarkPlacement: 'on',
tickPosition: 'inside',
tickInterval:1,
labels: {
// step:1,
// enabled:false,
style: {
color: '#999'
}
}
}],
chart:{
},
scrollbar:{
enabled:false
},
yAxis: [{
gridLineDashStyle: 'Dash',
gridLineColor: '#c7c7c7',
gridLineWidth: 1,
min:-1000,
tickInterval:50,
title:"",//删除y轴注释
max:1000,
}],
tooltip: {
shared: true
},
series: [{
name: '数据',
type: 'line',
yAxis: 0,
data: ajax_data(),
color: Highcharts.getOptions().colors[3],
tooltip: {
valueSuffix: ''
},
lineWidth:0.5,
marker: {
symbol: 'circle',
lineWidth: 0.5,
lineColor: Highcharts.getOptions().colors[3],
fillColor: 'white'
}
}]
});
});
以上三步，我们可左右滑动的折线图就完成了，效果图和源码地址在开头
总结
到此这篇关于使用Android原生WebView+Highcharts实现可左右滑动的折线图的文章就介绍到这了,更多相关Android WebView Highcharts左右滑动折线图内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
Android绘制动态折线图
所谓动态折线图,就是折线图能随着手指的滑动进行动态绘制,这里很定会产生动画效果.基于这个效果,这里使用SurfaceView进行制图. 实现步奏如下: (1): 这里新建一个绘图ChartView,继承SurfaceView并实现SurfaceHolder.Callback , Runnable接口,主要绘图工作在子线程中完成. (2):现实 SurfaceHolder.Callback接口的三个方法,并在 surfaceCreated中开启子线程进行绘图. (3):重写onTouchEvent
-
Android自定义控件实现折线图
本文实例实现一个如下图所示的Android折线图,供大家参考,具体内容如下 首先是控件绘图区域的划分,控件左边取一小部分(控件总宽度的八分之一)绘制表头,右边剩余的部分绘制表格 确定表格的行列数,首先绘制一个三行八列的网格,设置好行列的坐标后开始绘制 /*绘制三条横线*/ for(int i=0;i<3;i++){ canvas.drawLine(textWide, mLineYs[i], totalWidth, mLineYs[i], mPaintLine); } /*绘制八条竖线*/ for
-
Android自定义View实现折线图效果
下面就是结果图(每种状态用一个表情图片表示): 一.主页面的布局文件如下: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height=&quo
-
使用Android原生WebView+Highcharts实现可左右滑动的折线图
目录 前言 开发的思路如下: (一)设计Android端的View层 (二)设计与JS交互的方法 (三)开发html以及js逻辑 总结 前言 今天的内容是使用Android原生webview配合Highcharts开发折线图左右滑动的功能,折线图有很多优秀的第三方库可以使用,比如MPAndroidChart.Highcharts,MPAndroidChart可以通过拉伸折线图界面进行滑动折线图,亲测有效,现在我要讲的是如何使用内嵌html页面进行滑动折线图的开发.效果以及源码目录结构如下图,源码
-
jQuery插件HighCharts绘制2D带Label的折线图效果示例【附demo源码下载】
本文实例讲述了jQuery插件HighCharts绘制2D带Label的折线图效果.分享给大家供大家参考,具体如下: 1.示例代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HighCharts 2D带Label的折线图</title> <script type="text/javascript" src=&q
-
Android实现WebView点击拦截跳转原生
1. 首先设置Web视图 webview.setWebViewClient(new MyWebViewClient()); webview1.setWebViewClient(new MyWebViewClient()); 2. 拦截点击的链接,跳转到对应的页面 // 监听 所有点击的链接,如果拦截到我们需要的,就跳转到相对应的页面. private class MyWebViewClient extends WebViewClient { @Override public boolean sh
-
Android的WebView与H5前端JS代码交互的实例代码
前段时间项目有深度和前端对接过,也是碰了一些坑,现在有时间就拿出来分享下 JS调用原生不外乎就两种,一种是传假的url,也就是url拦截的方式,类似于下面这种: //js代码 function sendCommand(param){ var url="js-call://"+param; document.location = url; } sendCommand("PlaySnake"); //Java代码 mWebView.setWebViewClient(ne
-
Android 解决WebView无法上传文件的问题
Android 解决WebView无法上传文件的问题 Android原生的WebView并不支持上传文件,需要我们自己实现相应的方法.于是我把工作中的相关代码记录下来.下次直接拿来用就行了.一点一滴都是经验. 1.需要定义三个变量 private ValueCallback<Uri[]> uploadMessageAboveL; private final static int FILE_CHOOSER_RESULT_CODE = 10000; private ValueCallback<
-
Android中webview与JS交互、互调方法实例详解
Android中webview与JS交互.互调方法实例详解 前言: 对于试水的功能,一般公司都会采用H5的方式来开发,可以用很少的资源与很短的项目工期来完成. 但许多情况下,H5页面会需要一些原生持有的一些如用户信息之类的数据,一些交互也需要调用原生的,如toast之类要保持同一个手机风格一致的交互行为.这个时候就需要能够让JS主动调用原生的方法来进行操作或者获取数据.或者是原生调用JS的方法在H5加载的时候传递一些参数. 对于原生调用JS的方法 我们需要实现一个WebViewClient,在这
-
Android中WebView的基本配置与填坑记录大全
前言 在应用程序开发过程中,经常会采用webview来展现某些界面,这样就可以不受发布版本控制,实时更新,遇到问题可以快速修复. 但是在Android开发中,由于Android版本分化严重,每一个版本针对webview都有部分更改,因此在开发过程中会遇到各种各样的坑,下面这篇就来给大家介绍关于Android中WebView的基本配置与填坑记录,话不多说了,来一起看看详细的介绍吧. 基本配置 // 硬件加速 getActivity().getWindow().setFlags( WindowMan
-
Android用webView包装WebAPP方法
前言 Android webView 兼容体验真的差到了极点!! 前一阵子,老板要将 WebAPP 放到 Android 和 iOS 里面,而我因为以前做过安卓,所以这方面就由我来打包,原理是很简单的,就是打开 APP 的时候用 webView 加载网站的网址,这样服务器一次更新,就能更新微信版, iOS 版和 Android 版; 首先我要说一句,如果你的 WebAPP 里面有文件上传,并且想要完全兼容,那么就别用原生的 WebAPP, 后面我会写一个关于 crossWalk 的博客,不过在此
-
Android使用WebView实现截图分享功能
在APP项目的开发过程中,经常会用到分享图片的功能,有时候还需要根据当前用户信息获取指定的分享图片,比如要求在用户分享图中显示用户名.Uid.用户头像等信息.想到的实现方法主要有两点: 1.通过android SDK自带的Canvas方法进行绘制. 2.通过webView实现客户端与H5交互,然后将H5界面做截图处理. 本文主要介绍第二种方式的实现过程,第一种方式的实现方法,后续有时间会在博客中做说明,下面开始本文内容. 首先确定我们要实现的逻辑: 1.客户端与H5的交互,客户端将用户信息(用户
-
Android组件WebView编写有道词典小案例分享
最近学习了WebView组件,写了一个有道词典的小案例,分享给大家,供大家参考,具体内容如下 效果图: 源码下载:https://coding.net/u/gxs1225/p/YouDaoDictionary/git 代码如下: 布局 activity_main.xml <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schema