最近用帆软报表做了一个项目，客户希望用到3D饼图。通过比对发现High charts 3D饼图效果不错。马上着手开发。先上效果图。
操作步骤：
1.下载Highcharts JS 文件。由于帆软report已经用到Jquery。本实现只需要下面俩文件。
cdn.highcharts.com.cn/highcharts/highcharts.js
highcharts.js
(256.9 KB, 下载次数: 73)
cdn.highcharts.com.cn/highcharts/highcharts-3d.js
highcharts-3d.js
(43.23 KB, 下载次数: 67)
2.保存以上俩文件到帆软安装目录
3.新建一个决策报表
4. 新建俩绝对画布块，上面一个是为了占.位，固定高度为50.
![]()
5. 在主绝对画布块，本示例为absolute0。选择事件Tab，然后添加“初始化后”事件。
6. 在事.件弹出框里面按照下图添加“引用JavaScript”，“参数”以及“JavaScript脚本”。其中qxz和qzm可以根据创建查询来取值。例如：本需求用到的JOINARRAY(ds1.select(defect_type), ",") JOINARRAY(ds1.select(DefQty), ",")。reportTitle是要展示的3D饼图的标题。containerName是要展示饼图的控件名称。
7. 本示例的JavaScript脚本，可以根据需要修改。
- setTimeout(function (){ //延时执行
- $("div[widgetname="+containerName.toUpperCase()+"]").empty(); //清空标签控件里的内容 LABEL0 标签控件名
- $("div[widgetname="+containerName.toUpperCase()+"]").append("<div style='width:100%;height:100%;' id='"+containerName.toUpperCase()+"_threedpie'></div>");
- Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function(color) {
-
- return {
-
- radialGradient: { cx: 0.5, cy: 0.3, r: 0.7 },
-
- stops: [
-
- [0, color],
-
- [1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken
-
- ]
-
- };
-
- });
- strs1 = qxm.split(","); // 将参数转换成数组，根据图表数据格式进行处理
- strs2 = qxz.split(",");
- //计算百分比。
- ys = [];
- pdatas = [];
- total = 0;
- for (i=0; i<strs2.length; i++) {
- total = total+parseInt(strs2, 10);
- }
- totalPercentage = 0;
- for (i=0; i<strs2.length; i++) {
- if (i==strs2.length-1) {
- ys = 100-totalPercentage;
- } else {
- ys = Math.round(parseInt(strs2, 10)/total * 1000)/10;
- }
- totalPercentage = totalPercentage+ys;
- pdatas = {name: strs1,y: ys, txt: strs1, num: strs2};
- }
- var chart = {
- renderTo: containerName.toUpperCase()+'_threedpie',
- type: 'pie',
- options3d: {
- enabled: true,
- alpha: 45,
- beta: 0
- }
- };
- var title = {
- text: reportTitle
- };
- var tooltip = {
- pointFormat: '{point.num}个 <b>{point.percentage:.1f}%</b>'
- };
- //var colors=['#FF0000','#00FF00','#0000FF','#FFFF00','#00FFFF','#FF00FF']; //设置饼图颜色
- var credits = {
- enabled: false //禁用版权url 此处不设置， 会显示highecharts.com
- };
- var plotOptions = {
- pie: {
- allowPointSelect: true,
- cursor: 'pointer',
- depth: 35, //饼图厚度
- // color:pieColors,
- dataLabels: {
- distance: 20,//设置引导线的长度
- // color:'red',//全局设置字体颜色
- enabled: true,
- // format: '{point.name}',
- formatter: function() { //设置字体与引导线和饼图颜色一致
- return '<b>'+ this.point.name +'</b>: '+ this.point.num +' 个 '+Highcharts.numberFormat(this.percentage, 2)+'%';
- }
- /* style: {
- fontSize: '10px',//设置字体大小
- fontFamily: 'Verdana, sans-serif'
- }*/
- },
- showInLegend: true
- },
- };
- var series= [{
- type: 'pie',
- name: 'Browser share',
- startAngle: 180,//调整饼图的角度 方向：顺时针
- data: pdatas
- }];
- var json = {};
- json.chart = chart;
- json.title = title;
- json.tooltip = tooltip;
- //json.colors = colors; // 设置饼图颜色
- json.credits = credits;
- json.plotOptions = plotOptions;
- json.series = series;
- new Highcharts.Chart(json);
- }, 500);
8. 以上步骤做完后生成的模板见。
Form13.frm
(6.95 KB, 下载次数: 29, 售价: 20 个F豆)
|
