HTML5项目笔记9：HTML5 Canvas 的图表报表开发

//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();