Implementation of the--echarts implementation of the chart display in Android

Android wants to achieve the display of the chart, very troublesome. Online search for the implementation of the scheme, there are no more than three kinds:

1. Write your own canvas, slowly realize, request too high, difficult to fix.

2. Use Achartengine Implementation, ugly, and very small extensibility.

3. Using WebView to load JS, although the theory will be more cost-effective, but the effect is good, and the difficulty is much smaller.

Here is an example of how this is vaguely described:

First, the layout file:

<relativelayout xmlns:android= "http://schemas.android.com/apk/res/android" xmlns:tools= "http// Schemas.android.com/tools "android:layout_width=" match_parent "android:layout_height=" Match_parent "Android:paddi ngbottom= "@dimen/activity_vertical_margin" android:paddingleft= "@dimen/activity_horizontal_margin" Android: paddingright= "@dimen/activity_horizontal_margin" android:paddingtop= "@dimen/activity_vertical_margin" tools: context= "com.hzbst.echartst.MainActivity" ><linearlayout android:id= "@+id/bt_ly" android:layout_width= "    Match_parent "android:layout_height=" wrap_content "android:gravity=" Center_horizontal "><Button Android:id= "@+id/linechart_bt" style= "? Android:attr/buttonstylesmall" Android:layout_width= "Match_parent" Android : layout_height= "Wrap_content" android:layout_weight= "1" android:text= "line chart"/> <button android:id= "@+id/b Archart_bt "style="? Android:attr/buttonstylesmall "Android:layOut_width= "Match_parent" android:layout_height= "Wrap_content" android:layout_weight= "1" android:text= "histogram"/>& Lt    Button android:id= "@+id/piechart_bt" style= "Android:attr/buttonstylesmall" android:layout_width= "Match_parent" android:layout_height= "Wrap_content" android:layout_weight= "1" android:text= "pie chart"/></linearlayout><w Ebview android:id= "@+id/chartshow_wb" android:layout_below= "@id/bt_ly" android:layout_width= "Match_parent" an droid:layout_height= "Match_parent"/> </RelativeLayout>

three buttons, one webview, very simple layout. the corresponding activity is as follows:

Package Com.hzbst.echartst;import Android.app.activity;import Android.os.bundle;import android.view.View;import Android.view.view.onclicklistener;import Android.webkit.webview;import Android.webkit.webviewclient;import Android.widget.button;public class Mainactivity extends Activity implements Onclicklistener{private Button Linechart_ Bt;private button barchart_bt;private button piechart_bt;private WebView chartshow_wb; @Overrideprotected void onCreate (Bundle savedinstancestate) {super.oncreate (savedinstancestate); Setcontentview (R.layout.activity_main); Initview ();} /** * Initialize page element */private void Initview () {linechart_bt= (button) Findviewbyid (R.ID.LINECHART_BT); barchart_bt= (Button) Findviewbyid (R.ID.BARCHART_BT);p iechart_bt= (Button) Findviewbyid (R.ID.PIECHART_BT); Linechart_ Bt.setonclicklistener (This), Barchart_bt.setonclicklistener (this),;p Iechart_bt.setonclicklistener (this); chartshow_wb= (WebView) Findviewbyid (R.ID.CHARTSHOW_WB);//Perform a bunch of Webwiev settings//Turn on local file reads (default is True, not set or Yes) Chartshow_ Wb.getsettings (). sEtallowfileaccess (TRUE);//Open script supports Chartshow_wb.getsettings (). Setjavascriptenabled (True); Chartshow_wb.loadurl (" File:///android_asset/echart/myechart.html ");} @Overridepublic void OnClick (View v) {switch (V.getid ()) {Case R.id.linechart_bt:chartshow_wb.loadurl ("javascript: Createchart (' line ', [89,78,77]); Break;case R.id.barchart_bt:chartshow_wb.loadurl ("Javascript:createchart (' Bar ', [89,78,77]);"); Break;case R.id.piechart_bt:chartshow_wb.loadurl ("Javascript:createchart (' Pie ', [89,78,77]);"); Break;default:break;}}}

The Android code is done here, it's very simple. The core code is to invoke the JS file in asset. Then call the JavaScript function again. in this way, the main amount of development is actually put into JavaScript, so there is a need for some understanding of the JavaScript language. the corresponding HTML page code is as follows:

 <script type= "Text/javascript" >//initialization path Var mychart;    Require.config ({paths: {echarts: './js '}});                  General properties define var options = {title: {text: "Echart Test"},                      ToolTip: {Show:false}, Toolbox: {         Show:false},};  Create a line chart function Createlinechart (dataarray) {options = {xaxis: [{type: ' Category ', Boundarygap:false, data: [' first ', ' second ', ' Third ']}, y Axis: [{type: ' value '}], series: [{n Ame: ' Deal ', type: ' line ', Smooth:true, ItemStyle: {normal: {areastyle: {type: ' d Efault '}}, Data:dataarraY}]};                    }//Create Histogram function Createbarchart (dataarray) {options = {xaxis: [{ Type: ' Category ', data: [' first ', ' second ', ' Third ']}, YAxis                : [{type: ' value '}], series: [            {name: ' Deal ', type: ' Bar ', Data:dataarray}                        ]        }; }//Create pie chart function Createpiechart (dataarray) {options = {series: [{t                    ype: ' Pie ', radius: ' 55% ', center: [' 50% ', ' 60% '], data:[                    {value:335, Name: ' Direct Access '}, {value:310, name: ' Mail Marketing '}, {value:234, Name: ' affiliate AD '}, {value:135, Name: ' Video ad '}, {value:1548, Name: ' Search Engine '}]}]}; } function Createchart (Chartkind,dataarray) {if (chartkind== ' line ') {Docreatchart (create            Linechart (DataArray));            };            if (chartkind== ' bar ') {Docreatchart (Createbarchart (DataArray));            };            if (chartkind== ' pie ') {Docreatchart (Createpiechart (DataArray));        }; } function Docreatchart (specificchartfunction) {require ([' echarts ', ' Echarts/theme/macaro            NS ', ' echarts/chart/line ', ' echarts/chart/bar ', ' Echarts/chart/pie ', function (ec,theme) {            MyChart =ec.init (document.getElementById (' main '), theme);             Mychart.showloading ({text: "The chart data is trying to load ..."});            Specificchartfunction; Mychart.setoption (options);             The option is injected into the MyChart mychart.hideloading () first; }        );        }//createchart (' line ', [89,78,77]);    Createchart (' Bar ', [89,78,77]);    Createchart (' Pie ', [89,78,77]); </script>

individuals prefer this kind of chart implementation, a very good place is to test convenience. Before using Achartengine to do a project, again and again to restart Android, too tragic.

The final implementation results are as follows:

Finally attach the source code:

http://download.csdn.net/detail/huozhonbin/8551227

Oschina Address:

Http://git.oschina.net/wangjian/EchartAndroid

 

Implementation of the--echarts implementation of the chart display in Android