溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“怎么使用Android原生WebView+Highcharts實現可左右滑動的折線圖”，在日常操作中，相信很多人在怎么使用Android原生WebView+Highcharts實現可左右滑動的折線圖問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”怎么使用Android原生WebView+Highcharts實現可左右滑動的折線圖”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！
1.編寫activity，內含一個webview控件
2.編寫工具類，與js進行交互，傳輸一些數據（例如網絡請求需要的參數）
3.編寫html與js代碼，通過Android與js約定好的方法名進行數據的獲取，完成Android與js的交互
4.調整html中div的寬度，達到自己想要的滑動以及折線圖效果
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");
}
}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);
}
}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" ></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實現可左右滑動的折線圖”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
