Use and interaction of different Android charts

First of all, I am in the internship, not too much experience, may write not too much technical content, typesetting and language organization is also very deficient, we need to see.

Recently participating in a project, there is a function is to use a line chart to show the last six months of consumption, click a month after the specific month in the pie chart to show the specific consumption information. First you need to understand the two steps you must complete to achieve the desired functionality:

The first step: the implementation of Java code to the HTML file value, which contains all the data to be displayed (JSON type more), the general use of the whole variable value method, is equivalent to a variable to the string substitution, said very easy, but the practice is really very tangled, Check many times the idea of fully conforming to the value of the pass, but why is it not passed? The heart that wants to die has, and sometimes in this place can not, in the same another place to use the same method is indeed possible. Hey, go out to a circle, there is no way, only dead horse when live horse medical, come back in the HTML file after the variable with a comma (according to the syntax rules in a block of code after the last statement is not required) Try it, TMD unexpectedly can, it is strange, and then the comma deleted, unexpectedly still can, I don't know what's going on here. Anyway, that's all. Also, the path to the. js file referenced in the HTML file must be correct, otherwise the display is just a whiteboard.

The second step: is the HTML code calls the Java code inside the method, because click the following month after the above pie chart is to change according to the month. This implementation requires adding a statement to the Java code: Webview.addjavascriptinterface (This, "Surveyutil"), so that window can be used in HTML. Surveyutil. Method name (method parameter); Call the corresponding method in the This class. This process is easy to understand, the main thing is that different charts get the x-axis index of the clicked module is not the same, and on their own official website does not have such an introduction. I can only search and search on the Internet.

For example, Baidu Echarts is to achieve this:

var ecconfig = require (' Echarts/config '); Mychart.on (EcConfig.EVENT.CLICK, function (param) {       //Refresh dynamic icon-- Get dataindex, call Java Open Interface       //Call to refresh Library table part       window. Surveyutil.getcheckdetail (Param.dataindex);});

And Highcharts is implemented in this way:

Events: {click:function (event) {  window. Surveyutil.getcheckdetail (event.point.x);//Get selected x-coordinate value}}

In Jqplot and FLOTR2, the following engineering code also has a corresponding implementation, it is important to note thata float type is returned in Flotr2, and the month to get a click needs to be rounded to get an integer, which can be done by this.month = (int) (month + 0.5); This (I think) is a clever way to get it.

Methods to use in Java code:

public void Getcheckdetail (float month) {//Get month, refresh pie chart data according to month}

So the second step is done.

in general, in Java code is the first to get the WebView object, and then to one of its settings, such as the interface magnification, the page according to the screen size of mobile phone adjustment and center display, support plug-ins, etc., the focus is set webview.getsettings (). Setjavascriptenabled (True); and Webview.setwebchromeclient (New Webchromeclient ()); is essential. Next you can pass the Webview.loadurl ("file:///android_asset/chart.html"), load the page file under the Asserts folder, it is important not to call the Refresh method immediately to the data incoming, Because it takes time to load the page, it may not have been loaded when we immediately refresh it, and in the log you will find a warning that the method cannot be found. Our workaround is to rewrite the onpagefinished () method in the Webviewclient class, which is the callback method after the page is loaded, and refreshing our data is OK. When we click on a month in a line chart to refresh the data, we don't have to worry about finding the method, because the method is loaded long after the first page has finished loading. The general process is probably the case. Specific can be viewed in the complete project code.

The demo project code shows how Android uses a variety of different vendor charts, including line charts and pie charts, with Echarts flotr2 highcharts jqplot Four different types, where Highcharts is charged, Echarts video is the best, but there may be some abnormalities in the phone model, such as the background becomes black and so on. Think flotr2 and jqplot page is really ugly, tune for a half day can only this, if you can get better visual effect can communicate with me, I will be grateful for your sharing.

Demo Full code: http://download.csdn.net/detail/u014071669/7752545

May want a bit more (hey, who let me download time is not enough), if you really have no points, you can find me alone.

The first full play so long blog, do not like to spray ah. Thank you!