请选择 进入手机版 | 继续访问电脑版

开发者社区

 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
热搜: 安装 BPM 控件
查看: 3739|回复: 0

统计图控件 Highchart 开发手册

[复制链接]

40

主题

49

帖子

260

积分

超级版主

Rank: 8Rank: 8

积分
260
发表于 2016-5-17 17:25:03 | 显示全部楼层 |阅读模式
本帖最后由 tanglixu 于 2016-5-18 11:23 编辑

目录

第一章 概要
第二章 简单示例
第三章 数据绑定示例
第四章 与主页集成



第一章 概要


一、功能特性

1、只要指定配置参数可以显示各种常用图表,通过 Init() 方法
2、本控件内部封装的是 Highchart 核心,中文Demo  中文Api  英文Demo  英文Api
3、提供便捷的数据加载方法 LoadDataService, LoadDataJson
4、只需要到官方复制demo的代码即可看到响应的使用效果

二、主要方法

1、HighChart
  • void Init(options)  初始化统计图配置
  • void LoadDataService(dataService, callback) 通过数据服务生成统计图
  • void LoadDataJson(data)  通过Json生成统计图
三、基本组成,详细说明
1.png



第二章 简单示例


一、效果图
2.png 3.png

二、开发过程


1、添加控件,设置控件布局
2、在初始化后添加如下代码,预览看结果

var chartOptions = {
    chart: {
         type : "line" // column 柱状图, line 线条图
    },
    title: {
        text: '城市平均温度统计'
    },
    xAxis: {
        categories: ['1月', '2月', '3月', '4月']
    },
    yAxis: {
        title: {
            text: '温度 (°C)'
        }
    },
    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle',
        borderWidth: 0
    },   
    series: [{
        name: '北京',
        data: [7.0, 6.9, 9.5, 14.5]
    }, {
        name: '成都',
        data: [-0.2, 0.8, 5.7, 11.3]
    }]
}
highChart1.Init(chartOptions);
highChart1.Refresh();


3、更改图的类型,支持的图类型,下边的代码修改为函数,通过传递类型来实现

function LocalLoadChart(chartType){
    var chartOptions = {
        chart: {
            type : chartType //column,line
        },
        title: {
            text: '城市平均温度统计'
        },
        xAxis: {
            categories: ['1月', '2月', '3月', '4月']
        },
        yAxis: {
            title: {
                text: '温度 (°C)'
            }
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle',
            borderWidth: 0
        },   
        series: [{
            name: '北京',
            data: [7.0, 6.9, 9.5, 14.5]
        }, {
            name: '成都',
            data: [-0.2, 0.8, 5.7, 11.3]
        }]
    }
    highChart1.Init(chartOptions);
    highChart1.Refresh();
}
LocalLoadChart("column"); [url=]//根据类型加载[/url]


4、添加事件支持

function LocalLoadChart(chartType){
    var chartOptions = {
        chart: {
            type: chartType, //column,line
            events: {
                click: function(eventArgs){   //点击提示框触发的事件
                    Common.Dialog.alertDetail(eventArgs);
                }
            }

        },
        plotOptions: {
            column: {
                events: {
                    click: function(eventArgs){  //点击柱状图的柱子触发的事件
                        Common.Dialog.alertDetail(eventArgs);
                    }
                }
            },
            line: {
                events: {
                    click: function(eventArgs){ //点击线条图的线条点触发的事件
                        Common.Dialog.alertDetail(eventArgs);
                    }
                }
            }

        },
        title: {
            text: '城市平均温度统计'
        },
        xAxis: {
            categories: ['1月', '2月', '3月', '4月']
        },
        yAxis: {
            title: {
                text: '温度 (°C)'
            }
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle',
            borderWidth: 0
        },   
        series: [{
            name: '北京',
            data: [7.0, 6.9, 9.5, 14.5]
        }, {
            name: '成都',
            data: [-0.2, 0.8, 5.7, 11.3]
        }]
    }
    highChart1.Init(chartOptions);
    highChart1.Refresh();
}
LocalLoadChart("line"); // 根据类型加载





第三章 数据绑定示例


一、效果图
4.png

二、开发过程

1、编写数据服务

SELECT dbo.FN_CodeItemIDToName('AX',A0104) AS 性别,count(*) AS 人数
FROM A01 WHERE A0104 IS NOT null
GROUP BY A0104


2、编写脚本代码

var chartOptions = {
    chart: {
        type: "column"
    },
    title: {
        text: "性别分布"
    },
    yAxis: {
        title: {
            text: "人数"
        }
    }
}
highChart1.Init(chartOptions);
highChart1.LoadDataService({
    ID: "C228FB5883B74A879D2991314C86ED7C",
    Args: {}
});


三、LoadDataService 数据格式说明

1、数据规则:字段名称为图例项目(线,柱);第一列为 X 轴项目

2、参考例子1:
  • 数据

5.png
  • 结果

6.png

3、参考例子2
  • 数据

7.png
  • 结果

8.png


第四章 与主页集成

一、操作过程

1、打开首页模型
2、添加1个首页模块“性别分布”,设置显示方式为界面模型
3、设置模块代码,红框处为关联的界面窗体和显示高度
9.png
4、显示结果

10.png


您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|手机版|一步通软件 ( 蜀ICP备15031919号 )

快速回复 返回顶部 返回列表