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

最新推荐文章于 2021-06-02 17:15:16 发布

豆豆啊豆豆

最新推荐文章于 2021-06-02 17:15:16 发布

阅读量1.9k

点赞数

分类专栏： Android 文章标签： android折线图

本文链接：https://blog.csdn.net/wyj2424/article/details/48348275

版权

Android 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

之间给大家分享过一个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>