溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

怎么使用Android原生WebView+Highcharts實現(xiàn)可左右滑動的折線圖

發(fā)布時間：2022-05-20 13:47:19 來源：億速云 閱讀：203 作者：iii 欄目：開發(fā)技術(shù)

這篇文章主要介紹“怎么使用Android原生WebView+Highcharts實現(xiàn)可左右滑動的折線圖”，在日常操作中，相信很多人在怎么使用Android原生WebView+Highcharts實現(xiàn)可左右滑動的折線圖問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”怎么使用Android原生WebView+Highcharts實現(xiàn)可左右滑動的折線圖”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

怎么使用Android原生WebView+Highcharts實現(xiàn)可左右滑動的折線圖

怎么使用Android原生WebView+Highcharts實現(xiàn)可左右滑動的折線圖

開發(fā)的思路如下：

1.編寫activity，內(nèi)含一個webview控件
2.編寫工具類，與js進行交互，傳輸一些數(shù)據(jù)（例如網(wǎng)絡(luò)請求需要的參數(shù)）
3.編寫html與js代碼，通過Android與js約定好的方法名進行數(shù)據(jù)的獲取，完成Android與js的交互
4.調(diào)整html中div的寬度，達到自己想要的滑動以及折線圖效果

（一）設(shè)計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行進行數(shù)據(jù)傳輸

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");
    }
}

（二）設(shè)計與JS交互的方法

JsDataUtils.java的代碼如下，通過@JavascriptInterface與js進行交互，傳輸數(shù)據(jù)，這里傳輸?shù)氖蔷W(wǎng)絡(luò)請求需要的參數(shù)，到時候可以在js中使用ajax請求數(shù)據(jù)并繪制折線圖，但是我們這里為了方便，只用模擬數(shù)據(jù)進行演示

public class JsDataUtils {
    private Map<String, String> map;
    private Gson mGson = new Gson();

    /**
     * 通過構(gòu)造函數(shù)像js傳遞網(wǎng)絡(luò)請求的參數(shù),以map作為容器，后面再轉(zhuǎn)成字符串
     *
     * @param map
     */
    public JsDataUtils(Map<String, String> map) {
        this.map = map;
    }

    @JavascriptInterface
    public String stringToHtml() 
{
        return mGson.toJson(map);
    }
}

（三）開發(fā)html以及js邏輯

line.html代碼如下：這里通過調(diào)整div的寬度決定折線圖X軸的間隔劃分，已知如果不進行間隔設(shè)置的話默認是均分

<!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" ></div>
<script type="text/javascript" src="js/line.js" charset="utf-8"></script>
</body>
</html>

line.js代碼如下：14-22行是進行ajax請求數(shù)據(jù)，最后在chart的series中的data屬性進行賦值繪制，這里使用測試數(shù)據(jù)進行演示，第6行是獲取activity中傳輸?shù)臄?shù)據(jù)

var newArray=new Array();
 var chart=null;
   $(document).ready(function() {
    //通過Android方法來獲取參數(shù)map,轉(zhuǎn)成json對象獲取參數(shù)
     var mapJson=android.stringToHtml();
     var map=JSON.parse(mapJson);
     function ajax_data() {
                     //這里先用死數(shù)據(jù)進行測試，網(wǎng)絡(luò)請求可以使用下面的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 : "",//網(wǎng)絡(luò)請求接口地址
            async : false,
            dataType : "json",
            success : function(data){
              //這里處理返回的數(shù)據(jù)，即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: '數(shù)據(jù)',
    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'
    }
  }]
});
});

到此，關(guān)于“怎么使用Android原生WebView+Highcharts實現(xiàn)可左右滑動的折線圖”的學習就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續(xù)學習更多相關(guān)知識，請繼續(xù)關(guān)注億速云網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>

向AI問一下細節(jié)

免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手