Use and interaction of different android charts

Use and interaction of different android charts

First of all, I am working as an intern. I don't have much experience. I may not write much technical skills, and I am also lacking in typographical and linguistic organization. If you need it, let's take a look.

Recently, I joined a project and used a line chart to show the consumption of the last six months. After clicking a month, I can display the specific consumption information of the month in the pie chart. First, you must understand the two steps required to implement the desired function:

Step 1: implement the java code to pass values to html files, which contains all the data information to be displayed (the json type is large). Generally, the value passing method of the overall variable is used, it is equivalent to replacing the string with a variable. It is quite easy to say, but it is really tangled in practice. The idea of checking the string for many times is completely consistent with the value transfer idea, but why cannot it be passed in? I want to die, and sometimes I can't do it in this place. I can use the same method in the same place. Ah, let's go out and turn around. There's no way to do it. It's just a dead horse, come back and add a comma after the variable in the html file (there is no need to add it after the last statement of a code block according to the syntax rules). tmd can actually do it. It's strange, you can still delete the comma. You still don't know what's going on yet. In any case, it's okay. In addition, the path for referencing the. js file in the html file must be correct. Otherwise, only a whiteboard is displayed.

Step 2: the html code calls the method in the java code, because the pie chart above after the following month is changed according to the month. This implementation requires the following statement to be added to the java code: webView. addJavascriptInterface (this, "SurveyUtil"); in this way, you can use window in html. surveyUtil. method Name (method parameter); call the corresponding method in this class. This process is easy to understand, mainly because different charts have different methods to obtain the x-axis indexes of the clicked modules, and they are not introduced on their respective official websites. You can only search for it on the Internet.

For example, Baidu echarts is implemented as follows:

Var ecConfig = require ('echarts/config'); myChart. on (ecConfig. EVENT. CLICK, function (param) {// refresh the dynamic icon -- Obtain dataIndex and call the java open interface // call the window to refresh the database table. surveyUtil. getCheckDetail (param. dataIndex );});

The highcharts implementation is as follows:

Events: {click: function (event) {window. SurveyUtil. getCheckDetail (event. point. x); // obtain the selected x coordinate value }}

In jqplot and flotr2, the corresponding implementation is also available in the following project code. Note that flotr2 returns a float type. To obtain the clicked month, you need to round it to get an integer, you can use this. month = (int) (month + 0.5); this (I think) is a clever method.

Methods Used in java code:

Public void getCheckDetail (float month) {// obtain the month and refresh the pie chart data by month}

This completes the second step.

In general, in java code, the webview object is obtained first, and then a set is made for it. For example, the page is enlarged, and the page is adjusted and centered Based on the screen size of the mobile phone. The plug-in is supported, the focus is to set webView. getSettings (). setJavaScriptEnabled (true); and webView. setWebChromeClient (new WebChromeClient (); is essential. Next, you can use webview. loadUrl ("file: // android_asset/chart.html"); loads the page files in the asserts folder. It is important that you do not immediately call the refresh method to import data, it takes time to load the page. When we refresh the page immediately, this method may not be loaded yet. At this time, we will find that the method cannot be found in the log. Our solution is to rewrite the onPageFinished () method in the WebViewClient class. This method is the callback method after the page is loaded. refresh our data in it and it will be OK. When we click a month in the line chart to refresh the data, we don't have to worry about the problem of not finding the method, because the method has been loaded long after the page is loaded. This is probably the general process. You can view the details in the complete project code.

The demo project code shows how android uses charts of different vendors, including line charts and pie charts. There are four different types of charts: echarts flotr2 highcharts jqplot, of which highcharts is charged, the echarts video has the best effect, but some exceptions may occur when the phone model is different, such as black background. I think flotr2 and jqplot pages are really ugly, and I can only do this for a long time. If you can get better visual effects, I will be very grateful for your sharing.

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

There may be a lot of points (hey, who asked me not to download enough points). If you really don't have points, contact me separately.

For the first time, I had such a long blog. Thank you!