咱前面所涉的离线数据库、离线文件的操作,会话机制的控制,以及客户端跨域数据并、与劳动端的相,都好挺好的让用户以没有网络要跟劳务端断开链接的事态下进行例行的操作。但咱的此离线系统的客户吃含了成百上千的一定群体,如财务,会计、数据抽取人员,于是用对数据报表和数据图一个良强大支撑,让她们越来越直观地表达。

 

时的话,图表的开销组件还是多之。

有基于silverLight的 Visifire,这是自己的类别于采取MVC 3.0 开发前最欣赏用底图样组件,喜欢的缘故根本发生三触及(Visifire):

Open Source :相信这是不少程序员朋友最好欣赏看的。

Single API to both Silverlight & WPF:相信就也是多客户端应用开发程序员最欢喜看底。

Quick Start:启动速度很快,绝不输给给纯脚本的一些轻量级图表插件,而且因SilverLight的开销,给丁视觉上鲜艳夺目的冲击感。

 

事先也以MVC 3.0下蛋行使过Hight Charts,不得不承认这东西坏好用,案例丰富,文档齐全,学习及动用都能生快齐亲手,因为凡基于纯脚本的,在档次移植上着力未存什么问题,不像因SilverLight的零件,你得管服务机上面必须装SilverLight。

 

以依据HTML5 应用之开销被,因为生了 HTML5 Cavans API,提供了经过 JavaScript 绘制图形的法子,使得数据图开发尤其的便民,于是涌现出了成千上万因HTML5 Cavans的脚本库。可以参照这篇稿子的牵线:推荐18单依据 HTML5 Canvas 开发之图表库 

中自最好欣赏的便是ZingChart,因为他是首个可以为Flash和HTML5 Canvas两种植方案呈现图表的图表库,Flash版本,基本以备的浏览器都是永葆的。

 

俺们关心一下斯ZingChart的HTML5本子,因为商家之任何同事呢要是为此,所以小聊开了下二级封装,这边的包主要是领取了法,分离了针对数码的绑定,用传参的道来调用,这样做的原因是咱们页面上之数主要是故二维数组来保存数据,然后据此表格来见,这个二维数组传值进来正好对应了横轴,纵轴的数额。js库代码如下: 

图片 1图片 2View Code

//Ben HTML5 1.0
//Create By Ben 2012.5.25
//基于zingchart图表插件的二级封装

function BenCharts() {

    /*饼图*/
    /*title:标题*/
    /*fields:域*/
    /*values:值*/
    this.makePieChart = function(title, fields, values) {
        var content = new Array();
        for (var i = 0; i < fields.length; i++) {
            content[i] = '{"values": [' + values[i] + '],"text": "' + fields[i] + '"}';
        }

        var jsonConfigPie =
'{' +
    '"graphset": [' +
    '{' +
        '"type": "pie",' +
        '"legend": {' +
        '"visible": true' +
        '},' +

        '"title":{' +
            '"text":"' + title + '",' +
            '"font-family":"helvetica",' +
            '"font-size":"12px",' +
            '"background-color":"none",' +
            '"font-weight":"bold",' +
            '"font-color":"#000",' +
            '"text-align":"center"' +
        '},' +

        '"plot": {' +
        '"tooltip-text": "%t<br/>值: %v<br/>百分比: %npv",' +
        '"animate":true,' +
            '"speed":1,' +
            '"effect":5,' +
        '"value-box": {' +
        '"visible": true' +
        '}' +
        '},' +
        '"series": [' +
        content.join(',') +
        ']' +
    '}]' +
'}';
        return jsonConfigPie;
    }

    /*线形图*/
    /*title:标题*/
    /*xTitle:横轴标题*/
    /*yTitle:纵轴标题*/
    /*xValue:横轴节点*/
    /*fields:纵轴节点*/
    /*values:横纵轴二维数组*/
    this.makeLineChart = function(title, xTitle, yTitle, fields, values, xValue) {

        var content = new Array();
        for (var i = 0; i < fields.length; i++) {
            content[i] = '{"values": [' + values[i].join(',') + '],"text": "' + fields[i] + '","line-width": 2,"animate": 1,"effect": 1,"marker": {"size": "3px"}}';
        }

        if (!xValue) {
            xValue = '"1:' + values[0].length + ':1"'; //横轴:(初始,总量,增量值)
        }
        else xValue = '["' + xValue.join('","') + '"]'; //横轴:由开发人员自定义

        var jsonConfigLine =
    '{' +
        '"graphset": [' +
    '{' +
        '"type": "line",' +

       '"title":{' +
            '"text":"' + title + '",' +
            '"font-family":"helvetica",' +
            '"font-size":"12px",' +
            '"background-color":"none",' +
            '"font-weight":"bold",' +
            '"font-color":"#000",' +
            '"text-align":"center"' +
        '},' +

          '"legend": {' +
        '"visible": true' +
        '},' +

        '"scale-x": {' +
            '"values": ' + xValue + ',' +
            '"label": {' +
                '"text": "' + xTitle + '"' +
            '},' +
            '"zooming": 1' +
        '},' +
        '"scale-y": {' +
            '"max-items": 8,' +
            '"label": {' +
                '"text": "' + yTitle + '"' +
            '}' +
        '},' +
        '"plot": {' +
            '"tooltip-text": "%t, 值 %v"' +
        '},' +
        '"series": [' +
            content.join(',') +
            ']' +
        '}]' +
    '}';

        return jsonConfigLine;
    }

    /*柱状图图*/
    /*title:标题*/
    /*xTitle:横轴标题*/
    /*yTitle:纵轴标题*/
    /*xValue:横轴节点*/
    /*fields:纵轴节点*/
    /*values:横纵轴二维数组*/
    this.makeBarChart = function(title, xTitle, yTitle, fields, values, xValue) {

        var content = new Array();
        for (var i = 0; i < fields.length; i++) {
            content[i] = '{"values": [' + values[i].join(',') + '],"text": "' + fields[i] + '","animate": 1,"effect": 5}';
        }

        if (!xValue) {
            xValue = '"1:' + values[0].length + ':1"'; //横轴:(初始,总量,增量值)
        }
        else xValue = '["' + xValue.join('","') + '"]'; //横轴:由开发人员自定义

        var jsonConfigBar =
        '{' +
        '"graphset": [' +
    '{' +
        '"type": "bar",' +

       '"title":{' +
            '"text":"' + title + '",' +
            '"font-family":"helvetica",' +
            '"font-size":"12px",' +
            '"background-color":"none",' +
            '"font-weight":"bold",' +
            '"font-color":"#000",' +
            '"text-align":"center"' +
        '},' +

        '"legend": {' +
        '"visible": true' +
        '},' +

        '"scale-x": {' +
            '"values": ' + xValue + ',' +
            '"label": {' +
                '"text": "' + xTitle + '"' +
            '},' +
            '"zooming": 1' +
        '},' +
        '"scale-y": {' +
            '"label": {' +
                '"text": "' + yTitle + '"' +
            '}' +
        '},' +
        '"plot": {' +
            '"tooltip-text": " %t, 值: %v"' +
        '},' +
        '"series": [' +
        content.join(',') +
        ']' +
    '}' +
    ']' +
    '}';

        return jsonConfigBar;
    }

    /*线形扩展区域图*/
    /*title:标题*/
    /*xTitle:横轴标题*/
    /*yTitle:纵轴标题*/
    /*xValue:横轴节点*/
    /*fields:纵轴节点*/
    /*values:横纵轴二维数组*/
    this.makeAreaChart = function(title, xTitle, yTitle, fields, values, xValue) {

        var content = new Array();
        for (var i = 0; i < fields.length; i++) {
            content[i] = '{"values":[' + values[i].join(',') + '],"text":"' + fields[i] + '","line-width":"2px","animate":1,"effect":1,"marker":{"size":"3px"}}';
        }

        if (!xValue) {
            xValue = '"1:' + values[0].length + ':1"'; //横轴:(初始,总量,增量值)
        }
        else xValue = '["' + xValue.join('","') + '"]'; //横轴:由开发人员自定义

        var jsonConfigArea =
    '{' +
    '"graphset": [' +
    '{' +
    '"type":"area",' +

    '"legend": {' +
    '"visible": true' +
    '},' +

       '"title":{' +
            '"text":"' + title + '",' +
            '"font-family":"helvetica",' +
            '"font-size":"12px",' +
            '"background-color":"none",' +
            '"font-weight":"bold",' +
            '"font-color":"#000",' +
            '"text-align":"center"' +
        '},' +

'"scale-x":{' +
'"values": ' + xValue + ',' +
'"label":{' +
'"text":"' + xTitle + '"' +
'},' +
'"zooming":1' +
'},' +
'"scale-y":{' +
'"label":{' +
'"text":"' + yTitle + '"' +
'},' +
'"zooming":1' +
'},' +
'"plot":{' +
'"tooltip-text":"%t, 值: %v"' +
'},' +
'"series":[' +
  content.join(',') +
']' +
'}]' +
'}';
        return jsonConfigArea;
    }
}

var BC = new BenCharts();

 

页面调用示例如下:

图片 3图片 4View Code

/*使用饼图*/  
var fields = new Array("1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月");
            var values = new Array("100", "120", "35", "88", "66", "56", "79", "115", "42", "100", "110", "80");
            var datas = BC.makePieChart("月数据报表", fields, values);
            zingchart.render({
                'id': 'g1',
                'width': 500,
                'height': 300,
                'data': datas
            });

图片 5

图片 6图片 7View Code

            /*使用线形图*/
            var title = "月数据线形图";
            var xTitle = "2012各月份数据报表";
            var yTitle = "上报数据";
            var fields = new Array('东区', '西区', '南区', '北区');
            var xValue = new Array('1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月');
            var value1 = [12, 15, 55, 14, 22, 23, 64, 32, 27, 0, 0, 0];
            var value2 = [23, 17, 35, 19, 28, 32, 12, 59, 75, 45, 28, 72];
            var value3 = [35, 45, 25, 29, 33, 49, 42, 42, 12, 36, 45, 58];
            var value4 = [17, 16, 55, 65, 22, 46, 64, 32, 47, 12, 38, 40];
            var values = new Array(value1, value2, value3, value4);
            zingchart.render({
                'id': 'g2',
                'width': 600,
                'height': 250,
                'data': BC.makeLineChart(title, xTitle, yTitle, fields, values, xValue)
                //'data': makeLineChart(title, xTitle, yTitle, fields, values) //不写入xValue,则会自动生成横轴值
            });

图片 8

图片 9图片 10View Code

  /*使用柱状图*/
            var title = "月数据柱状图";
            var xTitle = "2012各月份";
            var yTitle = "上报件";
            var fields = new Array('东区', '西区', '南区', '北区');
            var xValue = new Array('1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月');
            var value1 = [12, 15, 55, 14, 22, 23, 64, 32, 47, 2, 2, 2];
            var value2 = [23, 17, 35, 19, 28, 32, 12, 59, 75, 45, 28, 72];
            var value3 = [35, 45, 25, 29, 33, 49, 42, 42, 12, 36, 45, 58];
            var value4 = [17, 16, 55, 65, 22, 46, 64, 32, 47, 12, 38, 40];
            var values = new Array(value1, value2, value3, value4);
            zingchart.render({
                'id': 'g3',
                'width': 860,
                'height': 300,
                'data': BC.makeBarChart(title, xTitle, yTitle, fields, values, xValue)
                // 'data': makeBarChart(title, xTitle, yTitle, fields, values) //不写入xValue,则会自动生成横轴值
            });

图片 11

 

实则后来发觉不行不客观,因为此图的数目我便是json格式构成的,所以理应直接拿相应格式的json字符串传上比较好,而我们为当页面上显得数据表格,把前面的json数据转成二维数组,然后又改变成为json串,装箱拆箱的,无端消耗性能。

再有一个急需留意的,这个ZingChart是匪能够用于商业用途的,如果您只要用以商业用途,那用交得的资费。这个挺坑的,我们商家是请了,如果是友好举行研究,也得以错过下试用版。这个想破解也容易,其实就算是同一积脚本,里面来只license.js,接下去,你懂的,嘻嘻…

因为自因此之时节是英文版本的,还无支持中文,所以我立刻边做了本地化,右键菜单现在亮的是中文。

源码下载:HTML5_Charts

相关文章

网站地图xml地图