android折线图ichartjs的动态加载数据

来源：互联网发布：温州淘宝摄影培训班编辑：程序博客网时间：2024/06/03 22:30

之间给大家分享过一个html写的折线图，再将折线图利用webview放在手机中，原来的那个折线图中的x轴坐标在html中已经被写死，这样就带来了操作的不变，代码的灵活性也随之降低。比如，我需要查看今天的温度，可是现在是晚上7点，今天还没有过完，那么问题来了，怎么才能动态的加载这些图的数据呢？
经过查找资料和网上的研究，现在再来和大家分享一下。
做出来的效果和上一篇是一样的，只不过这个是动态的加载数据。
我们先需要一个折线图的数据类，就叫它ChartData类吧，在这个类中，定义了折线图折线的名字，x坐标所对应的值和折线的颜色。来看下代码：

public class ChartData {    String name;    double[] values;    String color;    public void setName(String name) {        this.name = name;    }    public String getName() {        return name;    }    public void setValues(double[] values) {        this.values = values;    }    public double[] getValues() {        return values;    }    public void setColor(String color) {        this.color = color;    }    public String getColor() {        return color;    }}

还需要一个类，用来设置折线图的标题，长度和宽度，当然啦，两个类合在一起也是可以的。代码如下：

public class ChartParameter {    String title;      int width, height;      public void setTitle(String title) {          this.title = title;      }      public String getTitle() {          return title;      }      public void setWidth(int width) {          this.width = width;      }      public int getWidth() {          return width;      }      public void setHeight(int height) {          this.height = height;      }      public int getHeight() {          return height;      }  }

还需要一个类用于将数据变成json数组，然后跟html进行交互。

public class JsonPram {    public static String PackagePostData(Vector<ChartData> chartdata) {          JSONArray root = new JSONArray();          try{              for(int i = 0; i < chartdata.size(); i++) {                  JSONObject temp = new JSONObject();                  temp.put("name", chartdata.get(i).getName());                  temp.put("value", chartdata.get(i).getValues());                  temp.put("color", chartdata.get(i).getColor());                  root.put(temp);                   System.out.println(temp);              }          } catch (JSONException e) {              e.printStackTrace();              return null;          }          return root.toString();       }      public static String LabelData(Vector<ChartData> chartdata) {          JSONArray root = new JSONArray();          try{              for(int i = 0; i < chartdata.size(); i++) {                  JSONObject temp = new JSONObject();                  temp.put("name", chartdata.get(i).getName());                  JSONArray values = new JSONArray();                  for(int j = 0; j < chartdata.get(i).getValues().length; j++){                      values.put(chartdata.get(i).getValues()[j]);                  }                  temp.put("value", values);                  temp.put("color", chartdata.get(i).getColor());                  root.put(temp);              }          } catch(JSONException e) {              e.printStackTrace();              return null;          }          return root.toString();           }      public static String DataLabels(String[] datalabels) {          JSONArray root = new JSONArray();          try{              for(int i = 0; i < datalabels.length; i++) {                  root.put(datalabels[i]);              }          } catch (Exception e) {              e.printStackTrace();              return null;          }          return root.toString();           } }

主类的代码如下：
public class MyChartActivity extends Activity {

 private WebView web;      private String chart_data_json,data_labels;      private Vector<ChartData> chart_data = new Vector<ChartData>();      ChartParameter chartparameter = new ChartParameter();      @Override      public void onCreate(Bundle savedInstanceState) {          super.onCreate(savedInstanceState);          setContentView(R.layout.main);          initData();          initparmeter();          chart_data_json = JsonPram.LabelData(chart_data);          data_labels = JsonPram.DataLabels(new String[]{"0","2","4","6","8","10","12","14","16"});          System.out.println(chart_data_json);          web = (WebView) this.findViewById(R.id.web);          web.getSettings().setJavaScriptEnabled(true);         web.getSettings().setUseWideViewPort(true);

// web.getSettings().setSupportZoom(true);
// 设置是否可缩放
// web.getSettings().setBuiltInZoomControls(true);
web.getSettings().setLoadWithOverviewMode(true);
web.addJavascriptInterface(this, “chart_data_json”);//与html的接口，传递图表中的数据
web.addJavascriptInterface(chartparameter, “chart_parameter”);//传递的是图表的标题、宽度和高度
web.loadUrl(“file:///android_asset/JS.html”);
}

    /**      * 在JS.html中调用该函数，将chart_data_json的数值传过去      * @return      */      public String getContacts() {          return chart_data_json;      }      /**      * 传递横坐标的刻度值      * @return      */      public String getDataLabels() {          return data_labels;      }      /**      * 没用到，作用是在JS.html中调用，传递参数      * @return      */      public JavaArrayJSWrapper getContact() {          ChartData[] a = new ChartData[this.chart_data.size()];          a = this.chart_data.toArray(a);          return new JavaArrayJSWrapper(a);      }      /**      * 初始化图标的数据      */      public void initData() {          ChartData charttest = new ChartData();          charttest.setName("IE");          charttest.setValues(new double[]{4,16,18,20,32,36,38,31,28});          charttest.setColor("#1f7e92");          chart_data.add(charttest);      }      /**      * 初始化标题、宽度和高度      */      public void initparmeter() {              chartparameter.setTitle("大棚每日温度情况");          chartparameter.setWidth(1100);        chartparameter.setHeight(600);      }      public void debugout(String info) {          Log.i("TAG",info);          System.out.println(info);      }

}
里面也都有注释，需要的朋友可以自己看下，还有个html的代码

<!DOCTYPE html><html><head>    <meta charset="GBK"/>    <title>ichartjs</title>    <meta http-equiv="keywords" content="ichartjs demo,Html5 demo,ichart demo"></meta>    <meta http-equiv="description" content="The ichartjs's gallery center,ichartjs"></meta>    <script type="text/javascript" src="ichart-1.0.min.js"></script>    <link rel="stylesheet" href="../css/demo.css" type="text/css"/>    <script type="text/javascript">        $(function () {            var data;            var data_labels;            window.chart_data_json.debugout("inside js onload");            var chartDataJson = window.chart_data_json.getContacts();            var dataLabels = window.chart_data_json.getDataLabels();            window.chart_data_json.debugout(chartDataJson);            eval('data=' + chartDataJson);//eval作用是将外部传进来的String数据作为本地js数据，并执行            eval('data_labels=' + dataLabels);            var chart_title = window.chart_parameter.getTitle();            window.chart_data_json.debugout(chart_title);            var chart_width = window.chart_parameter.getWidth();            window.chart_data_json.debugout(chart_width);            var chart_height = window.chart_parameter.getHeight();            window.chart_data_json.debugout(chart_height);            new iChart.Area2D({                render: 'canvasDiv',                data: data,                title: {                    text: chart_title,                    height: 60,                    font: '微软雅黑',                    color: '#1f7e92',                    fontsize: 44                },                width: chart_width,                height: chart_height,                area_opacity: 0.15,                //开启动画效果                animation: true,//                    legend : {//                        enable : true//                    },//                    tip:{//                        enable : true//                    },                sub_option: {                    smooth: true,                    label: {fontsize: 25,color: '#1f7e92'},                    point_size: 14                },                subtitle: {                    text: '单位:摄氏度',//利用副标题设置单位信息                    fontsize: 25,                    color: '#1f7e92',                    textAlign: 'left'                },                coordinate: {                    //坐标的属性                    axis: {                        width: [0, 0, 2, 2]                    },                    background_color: '#ffffff',                    height: '90%',                    valid_width: '94%',                    height: 260,                    scale2grid: false,                    //横线                    grids: {                        horizontal: {                            way: 'share_alike',                            value: 5                        }                    },                    scale:[{                        position:'left',                        start_scale:0,                        end_scale:50,                        scale_space:10,                        label:{color:'#1f7e92',font:'微软雅黑',fontsize:25,fontweight:400}                    },{                        position:'bottom',                        start_scale:1,                        end_scale:12,                        label:{color:'#1f7e92',font:'微软雅黑',fontsize:25,fontweight:400},                        labels: data_labels                    }]                }            }).draw();        });    </script></head><body><div id='canvasDiv'></div></body></html>

最后老规矩，附上代码，这个代码在之前的基础上进行了改进，看这个代码吧。
http://download.csdn.net/detail/wyj2424/9096029

0 0