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

最新推荐文章于 2021-06-28 13:50:47 发布

weixin_39814393

最新推荐文章于 2021-06-28 13:50:47 发布

阅读量206

点赞数

文章标签： html5项目报告

本文介绍了BenCharts，一个基于ZingChart的JavaScript函数库，用于快速创建饼图、线形图、柱状图和线形扩展区域图。函数库提供了灵活的参数配置，如标题、轴标题、数据值等，简化了图表的生成过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

function BenCharts() {/*饼图*/

/*title：标题*/

/*fields:域*/

/*values：值*/

this.makePieChart =function(title, fields, values) {

var content= newArray();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
值: %v
百分比: %npv",' +

'"animate":true,' +

'"speed":1,' +

'"effect":5,' +

'"value-box": {' +

'"visible": true' +

'}' +

'},' +

'"series": [' +content.join(',') +

']' +

'}]' +

'}';returnjsonConfigPie;

}/*线形图*/

/*title：标题*/

/*xTitle:横轴标题*/

/*yTitle：纵轴标题*/

/*xValue:横轴节点*/

/*fields：纵轴节点*/

/*values：横纵轴二维数组*/

this.makeLineChart =function(title, xTitle, yTitle, fields, values, xValue) {

var content= newArray();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(',') +

']' +

'}]' +

'}';returnjsonConfigLine;

}/*柱状图图*/

/*title：标题*/

/*xTitle:横轴标题*/

/*yTitle：纵轴标题*/

/*xValue:横轴节点*/

/*fields：纵轴节点*/

/*values：横纵轴二维数组*/

this.makeBarChart =function(title, xTitle, yTitle, fields, values, xValue) {

var content= newArray();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(',') +

']' +

'}' +

']' +

'}';returnjsonConfigBar;

}/*线形扩展区域图*/

/*title：标题*/

/*xTitle:横轴标题*/

/*yTitle：纵轴标题*/

/*xValue:横轴节点*/

/*fields：纵轴节点*/

/*values：横纵轴二维数组*/

this.makeAreaChart =function(title, xTitle, yTitle, fields, values, xValue) {

var content= newArray();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(',') +

']' +

'}]' +

'}';returnjsonConfigArea;

}

var BC= new BenCharts();