Shulou(Shulou.com)05/31 Report--

This article mainly introduces "how to use Android native WebView+Highcharts to achieve left and right sliding line chart". In daily operation, I believe many people have doubts about how to use Android native WebView+Highcharts to achieve left and right sliding line chart. Xiaobian consulted all kinds of data and sorted out simple and easy-to-use operation methods. I hope it will be helpful for everyone to answer the question of "how to use Android native WebView+Highcharts to achieve left and right sliding line chart". Next, please follow the editor to study!

The idea of development is as follows:

1. Write activity with a webview control in it

two。 Write utility classes, interact with js, and transfer some data (such as parameters required for network requests)

3. Write html and js code, obtain data through the method name agreed between Android and js, and complete the interaction between Android and js.

4. Adjust the width of the div in html to achieve the desired sliding and line chart effect

(1) Design the View layer on Android

The activity_main.xml code is as follows:

The MainActivity.java code is as follows: if you want to interact with js, don't forget to add line 17 for data transfer

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 map) {/ / enable support javascript WebSettings settings = mWebView.getSettings (); settings.setJavaScriptEnabled (true) MWebView.setVerticalScrollBarEnabled (false); mWebView.addJavascriptInterface (new JsDataUtils (map), "android"); mWebView.loadUrl ("file:///android_asset/line.html");}}) (II) Design methods for interaction with JS

The code of JsDataUtils.java is as follows. It interacts with js through @ JavascriptInterface to transfer data. Here, the parameters needed for network request are transferred. At that time, you can use ajax in js to request data and draw a line chart. But for convenience, we only use simulation data to demonstrate.

Public class JsDataUtils {private Map map; private Gson mGson = new Gson (); / * pass the parameters of the network request through a constructor like js, using map as the container, and then convert it to the string * * @ param map * / public JsDataUtils (Map map) {this.map = map;} @ JavascriptInterface public String stringToHtml () {return mGson.toJson (map) (3) develop html and js logic

The line.html code is as follows: here, the interval division of the X axis of the line chart is determined by adjusting the width of the div. It is known that if the interval is not set, the default is evenly divided.

The line.js code is as follows: line 14-22 is the ajax request data, and finally the assignment is drawn in the data attribute in the series of chart. Here, the test data is used for demonstration. Line 6 is to get the data transmitted in the activity.

Var newArray=new Array (); var chart=null; $(document) .ready (function () {/ / get the parameter map through the Android method, which is converted to a json object to get the parameter var mapJson=android.stringToHtml (); var map=JSON.parse (mapJson) Function ajax_data () {/ / here we first test with dead data For network requests, you can use the following ajax var dataArr = [400Quest, 500pyrryl, 300pyrryl, 300pyrryl, 200pyrryl, 400pyrum, 200pyrum, 200pyrum, 200pyrum, 200pyrum, 200pyrum, 200pyrum, 200pyrum, 200pyrum, 500pyrum, 200pyrum, 200pyrum, 200pyrs, 200pyrs, 500pyrs, 200pyrs, 200pyrs, 500pyrs, 300pyrs, 400pyrs, 500pyrs, 300pyrs, 400pyrs, 500pyrs, 300pyrs, 400pyrs, 500pyrs, 300pyrs, 400pyrs, 500pyrs, 300pyrs, 500pyrs, 500pyrs, 500pyrs, 500pyrs, 500pyrs, 500pyrs, 500pyrs, 500pics, 300pyrs, 400pr, 400pr, 500pr, 300pr, 400pr, 500pr, 500pr, 300pr, 400pr, 500pr, 200pr, 500pr, 300pr, 200pr, 400pr, 500pr, 200 / * $.ajax ({type: "GET", url: "", / / Network request API address async: false, dataType: "json", success: function (data) {/ / the returned data is processed here, that is, 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:' # c7c7c7c7, gridLineWidth: 1 Min:-1000, tickInterval:50, title: "", / / delete y-axis annotations max:1000,}], tooltip: {shared: true}, series: [{name: 'data', 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'}}]}) At this point, the study on "how to use Android native WebView+Highcharts to implement a line chart that can slide left and right" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.