IOS report solution using open-source component ichartjs (1)

A few days ago, I wrote an example of using ichartjs to implement Mobile-side charts in the Android system. How can I achieve a more effective ichartjs chart without the IOS system of the Helper master?

Let's take a look at how to implement it.

Like the Android system, using uiwebview enables Ios to provide excellent HTML5 support.

First, let's take a look

The result is that the list of icons displayed on the home page is selected, and then the chart details are displayed to display the local icon file, which is an HTML file.

The iPhone simulator IOS's uiwebview scaling effect is still very good. You can freely scale it.

The implementation is as follows:

First, let's take a look at the project structure.

Put the html js file in the resource file package here the main use of ichart-1.0.min.js

The first interface ichartjsviewcontroller inherits from uiviewcontroller and uses uitableview. Therefore, the uitableviewdatasource and uitableviewdelegate protocols must be implemented.

Initialize uitableview

tableViewMain = [[UITableView alloc] initWithFrame:CGRectMake(0, 50, 320, 420) style:UITableViewStyleGrouped];    //    tableViewMain.style = UITableViewStyleGrouped;    [tableViewMain setDelegate:self];    [tableViewMain setDataSource:self];    [self.view addSubview:tableViewMain];

Because there is only one group, you can directly write the sectionname.

-(Nsstring *) tableview :( uitableview *) tableview titleforheaderinsection :( nsinteger) Section {return @ "chart Demo";}-(nsinteger) tableview :( uitableview *) tableview numberofrowsinsection :( nsinteger) section {return dataarray. count;}-(uitableviewcell *) tableview :( uitableview *) tableview cellforrowatindexpath :( nsindexpath *) indexpath {static nsstring * simpletableidentifier = @ "simpletableidentifier"; uitableviewcell * cell = [tableview Preview: simpletableidentifier]; If (cell = nil) {Cell = [[[uitableviewcell alloc] initwithstyle: uitableviewcellstyledefault reuseidentifier: simpletableidentifier] autorelease];} cell. accessorytype = uitableviewcellaccessorydetaildisclosurebutton; cell. TEXT = [dataarray objectatindex: indexpath. row]; nslog (@ "cell value ==%@", [dataarray objectatindex: indexpath. row]); Return cell ;}

Load uitableview data using the Protocol Method

cell.accessoryType = UITableViewCellAccessoryDetailDisclosureButton;  

Set the cell style display. click the button to click the event Code as follows:

(Void) tableview :( uitableview *) tableview accessorybuttontappedforrowwithindexpath :( nsindexpath *) indexpath {detailviewcontroller * detailvc = [[detailviewcontroller alloc] init]; nsstring * test = @ "test "; if (indexpath. row = 0) {detailvc. charttype = 0; test = @ "Area Chart Report";} If (indexpath. row = 1) {detailvc. charttype = 1; test = @ "bar chart Report";} detailvc. navigationitem. title = test; [self. navigationcontroller pushviewcontroller: detailvc animated: Yes];}

Click to go to the detailed view detailviewcontroller

detailVC.charttype = 0;

Determine transfer chart type

On the chart display page, you only need to initialize uiwebview and load the local HTML. The initialization code is as follows:

// Create uiwebview * webview = [[uiwebview alloc] initwithframe: cgrectmake (0, 0,320,400)]; [webview setuserinteractionenabled: Yes]; webview. scalespagetofit = yes; [webview setbackgroundcolor: [uicolor clearcolor]; [webview setopaque: No]; // make the web page transparent to webview. delegate = self; If (charttype = 0) {nsstring * Path = [[nsbundle mainbundle] pathforresource: @ "mianji_chart.html" oftype: Nil]; [webview loadrequest: [nsurlrequest requestwithurl: [nsurl fileurlwithpath: path];} else {nsstring * Path = [[nsbundle mainbundle] pathforresource: @ "canonical" oftype: Nil]; [webview loadrequest: [nsurlrequest requestwithurl: [nsurl fileurlwithpath: path];}

As a result, the static chart interface is displayed, as shown above, scaling can be performed at will.

Here you need to introduce the ichart-1.0.min.js, but pay attention to a point that xcode will automatically compile the. js file, and then xcode on the left side of the issue navigator view will be able to see the yellow exclamation mark prompts JS compilation has a warning

If JavaScript code is compiled, JavaScript code cannot be executed normally. So here you need to set the ichart-1.0.min.js to a file that is not automatically compiled and need to be configured in the targets view.

Different Versions of xcode configuration is not the same this method can refer to the http://blog.csdn.net/lovenjoe/article/details/7383376 to conduct

My xcode version 4.3.2 is configured as follows:

/

In the project configuration view, select targets --> build phases for detailed configuration methods. For more information, see the blog introduction.

OK. The demo source code can be downloaded as a reference.
Download Demo project source code

Next we will continue to learn more about how to use uiwebview to dynamically update chart data through JS calls. We will soon share with you ~~~~