Android App 图表制作之--ichartJs

来源：互联网发布：mac导入照片如何删除编辑：程序博客网时间：2024/06/08 16:52

Android流行的今天，很多比较工业，专业的应用也开始了Android化，这其中肯定少不了图表的使用。今天给大家分享下载我最近使用的图表开发的点经历。

先给大家看看用ichartjs制作出图表的效果。

更多的效果图，大家可以访问http://www.ichartjs.com/samples/index.html看，常用的图表基本山都有了。

具体的制作方法，明天继续！！！

一 . 从http://www.ichartjs.com/上下载最新的JS 文件,放在assets目录下。

二. 下一个Html文件,columnmlti2D.html

<!DOCTYPE html><html><head>    <meta charset="UTF-8"/>    <title>HHT5</title>    <meta name="Description" content=""/>    <meta name="Keywords" content=""/>    <script type="text/javascript" src="ichart.1.2.1.min.js"></script>    <script type="text/javascript">$(function(){            var data = window.javatojs.getData();            data = eval("(" + data + ")");            var startScale = window.javatojs.getStartScale();            var endScale = window.javatojs.getEndScale();            var scaleSpace = window.javatojs.getScaleSpace();            var viewWidth = window.screen.width;            var viewLabels = window.javatojs.getLabels();            viewLabels = eval("(" + viewLabels + ")");            var textColor="#707070";            var chart = new iChart.ColumnMulti2D({            color_factor : 0.5,            render : 'canvasDiv',            data : data,            animation : 'true',            animation_timing_function : 'easeOut',            labels : viewLabels,            align : 'center',            width : viewWidth*2/3,            height : 230,            offsety : -15,            background_color : '#ffffff',            label:{                    rotate : -45,                    textBaseline : 'middle',                    textAlign : 'right',                    color : '#707070'                  },            border:{                     width : 0                   },            coordinate:{                        color_factor : 0.5,                        grid_color : '#F7F7F7',                        grids:{                                horizontal:{                                   way : 'share_alike',                                   value : 5                                }                              },                        axis:{                                 enable : true,                                 width : 1,                                 color : '#F7F7F7',                             },                        scale:[{                                 position : 'left',                                 start_scale : startScale,                                 end_scale : endScale,                                 scale_space : scaleSpace,                                 scale_color : textColor,                                 label:{                                        rotate : -45,                                        textBaseline : 'middle',                                        textAlign : 'right',                                        color : textColor                                      }                              }],                       }        });        chart.draw();        });    </script></head><body><div id='canvasDiv'></div></body></html>

其中的data，startScale,endScale,scaleSpace,分别是我们从java类中传过来的数据源，开始刻度值，结束刻度值，刻度间隔信息。

三 .下面看看java类的实现

public class WorkloadStatisticsActivity extends Activity {    private WebView historyView;    private Column2D column2D;    public WorkloadStatisticsActivity() {        super(R.layout.workload_statistics_content_view);    }    public void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        initUi();    }    private void initUi() {        historyView = (WebView) findViewById(R.id.history_graph);        historyView.setHorizontalScrollBarEnabled(false);        historyView.setVerticalScrollBarEnabled(false);        initHistoryGraph();    }    private void loadGraphData(RuntimeDatabaseHelper helper) {        column2D = helper.loadWorkloadStatisticsForPastDays(Column2D.DAYS);        historyView.getSettings().setJavaScriptEnabled(true);        historyView.addJavascriptInterface(this, "javatojs");        historyView.loadUrl("file:///android_asset/columnmulti2d.html");    }    public long getScaleSpace() {        return column2D.getScaleSpace();    }    public long getEndScale() {        return column2D.getEndScale();    }    public long getStartScale() {        return column2D.getStartScale();    }    public String getData() {        return column2D.getData();    }    public String getLabels() {        return column2D.getLabels(Clock.now());    }}

Column2D类：

package com.sfexpress.hht5.domain;import com.google.common.collect.Iterables;import com.google.common.collect.Ordering;import com.google.common.primitives.Longs;import com.sfexpress.hht5.util.Clock;import org.joda.time.DateTime;import java.util.ArrayList;import java.util.List;import static com.sfexpress.hht5.util.JsonConverter.convertObjectToJson;import static java.util.Arrays.asList;public class Column2D {    public static final String SHIPMENT_COLOR = "#71B8FF";    public static final String DELIVERY_COLOR = "#77D182";    public static final String SHIPMENT_NAME = "SHIPMENT";    public static final String DELIVERY_NAME = "DELIVERY";    public static final int DAYS = 7;    private List<Long> deliveryData;    private List<Long> shipmentData;    private List<DisplayContent> data;    private long startScale;    private long endScale;    private long scaleSpace;    public Column2D(List<Long> shipmentData, List<Long> deliveryData) {        this.deliveryData = deliveryData;        this.shipmentData = shipmentData;    }    public long getScaleSpace() {        calcScale();        return scaleSpace;    }    public long getEndScale() {        calcScale();        return endScale;    }    public long getStartScale() {        calcScale();        return startScale;    }    public String getData() {        DisplayContent shipmentContent = new DisplayContent();        shipmentContent.setName(SHIPMENT_NAME);        shipmentContent.setColor(SHIPMENT_COLOR);        shipmentContent.setValue(shipmentData);        DisplayContent deliveryContent = new DisplayContent();        deliveryContent.setName(DELIVERY_NAME);        deliveryContent.setColor(DELIVERY_COLOR);        deliveryContent.setValue(deliveryData);        data = asList(shipmentContent, deliveryContent);        return convertObjectToJson(data);    }    public String getLabels(DateTime startDateTime) {        List<String> labels = new ArrayList<String>();        DateTime timeStart = startDateTime.minusDays(DAYS - 1);        DateTime timeStop = startDateTime.plusDays(1).minusDays(DAYS - 1);        for (int i = 0; i < DAYS; i++) {            labels.add(i, "\"" + Clock.getMonthAndDayOfDate(timeStart) + "\"");            timeStart = timeStart.plusDays(1);            timeStop = timeStop.plusDays(1);        }        return labels.toString();    }    private void calcScale() {        Ordering<Long> ordering = new Ordering<Long>() {            @Override            public int compare(Long first, Long second) {                return Longs.compare(first, second);            }        };        startScale = ordering.min(Iterables.concat(deliveryData, shipmentData));        Long maxValue = ordering.max(Iterables.concat(deliveryData, shipmentData));        if (maxValue < 4)            scaleSpace = 1;        else            scaleSpace = maxValue / 4;        endScale = maxValue + scaleSpace;    }    private class DisplayContent {        private String name;        private String color;        private List<Long> value;        private String getColor() {            return color;        }        private void setColor(String color) {            this.color = color;        }        private String getName() {            return name;        }        private void setName(String name) {            this.name = name;        }        private List<Long> getValue() {            return value;        }        private void setValue(List<Long> value) {            this.value = value;        }    }}

上面部分有些应用不是很完整，整体的思路就是，在html中用ichartjs 画出图表，然后在Activity中利用Webview 控件把html展示出来。

但是显示的方式和内容再有Acitity中传给 html。这样就可以在java类控制显示的内容，而不用操心怎么去绘制。例子中的data是直接转换好的

json串，传给js后需要调用data = eval("(" + data + ")") ，否则js无法识别。

大概的思路这样，我觉得功能还是很强大的，图表的各个部分都实现了对象化，操作起来很方便。不明白的地方去ichartjs网站看看，

文档都很相信。

开发最后遇到了问题是在手机上显示的内容不够清晰，好在ichartjs也发现了问题并进行了解决，最新的版本是1.2.1。