使用Android原生WebView+Highcharts实现可左右滑动的折线图

更新时间：2022年05月20日 10:53:05 作者：移动端开发_小黑

折线图是Android开发中经常会碰到的效果,但由于涉及自定义View的知识,对许多刚入门的小白来说会觉得很高深,下面这篇文章主要给大家介绍了关于如何使用Android原生WebView+Highcharts实现可左右滑动的折线图的相关资料,需要的朋友可以参考下

前言

今天的内容是使用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 PickerScrollView滑动选择控件使用方法详解
这篇文章主要为大家详细介绍了Android PickerScrollView滑动选择控件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-04-04
Android NDK 生成以及调用so 文件
本文主要介绍Android JNI开发,这里提供一个小实例,以及整个详细流程,具有参考价值,希望能帮助开发Android JNI 的小伙伴
2016-07-07
Android bug最近遇到的几个坑解决分享
这篇文章主要为大家介绍了Android bug最近遇到的几个坑解决分享，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-12-12
Android自定义View实现动画效果详解
这篇文章主要为大家详细介绍了Android如何通过自定义View实现动画效果，文中的示例代码讲解详细，感兴趣的小伙伴可以跟随小编一起学习一下
2023-02-02
Android中利用SurfaceView制作抽奖转盘的全流程攻略
这篇文章主要介绍了Android中利用SurfaceView制作抽奖转盘的全流程,从图案的绘制到转盘的控制再到布局,真的非常全面,需要的朋友可以参考下
2016-04-04
Android自定义控件实现可左右滑动的导航条
这篇文章主要介绍了Android自定义控件实现可左右滑动的导航条，能响应快速滑动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-07-07
Android中初始化Codec2的具体流程
这篇文章主要介绍了Android中初始化Codec2的具体流程，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2021-09-09
android图片压缩工具类分享
这篇文章主要为大家分享了android图片压缩工具类，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-12-12
Android DrawerLayout实现抽屉效果实例代码
这篇文章主要介绍了Android DrawerLayout实现抽屉效果的实例代码,非常不错，具有参考借鉴价值，需要的朋友可以参考下
2016-12-12
Android QQ新用户注册界面绘制
这篇文章主要为大家详细介绍了Android QQ新用户注册界面绘制代码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-09-09