iClient for JavaScript---客户端统计专题图

作者:刘大

统计专题图多用于具有相关数量特征的地图上,比如表示不同地区多年的粮食产量、GDP、人口等,不同时段客运量、地铁流量等。允许一次分析多个数值型变量, 即可以将多个变量的值绘制在一个统计图上。目前提供的统计图类型有:柱状图(Bar),折线图(Line),饼图(Pie),三维柱状图(Bar3D),点状图(Point), 环状图(Ring)。
SuperMap iClient for JavaScript 的库文件不包含图表类文件,在使用客户端统计专题图时需要单独引入所需的图表类文件。 SuperMap iClient for JavaScript 产品包中提供的图表类文件所在目录是:”产品包根目录/examples/js/graph”,首先大家可以看看(http://support.supermap.com.cn:8090/iserver/iClient/forJavaScript/examples/ThemeLayerGraphTopic.html),了解统计专题图的图表模型,今天就主要给大家讲讲如何配置图表。
首先呢,我们先来看看***SuperMap.Layer.Graph***的构造参数,如图

iClient for JavaScript---客户端统计专题图_第1张图片
其中,namechartsType就不多做阐述了,主要来说说options吧。

iClient for JavaScript---客户端统计专题图_第2张图片
那我就着重说说图表配置对象***chartsSetting*** ,其他3个参数在上面的图表中,已经做了很详细的描述了,在这里就不重复说明了。
这里以“Bar”类型的专题图为例,通过几个小应用来看看如何进行配置

 themeLayer.chartsSetting = {
                // width,height,codomain 分别表示图表宽、高、数据值域;此三项参数为必设参数
                width: 240,
                height: 100,
                codomain: [0, 40000],       // 允许图表展示的值域范围,此范围外的数据将不制作图表
                barStyle: {  fillOpacity: 0.7  },       // 柱状图中柱条的(表示字段值的图形)样式
                barHoverStyle: {fillOpacity: 1 },       //  柱条 hover 样式
                xShapeBlank: [10, 10, 10],      // 水平方向上的空白间距参数
                axisYTick: 4,         // y 轴刻度数量
                axisYLabels: ["4万", "3万", "2万", "1万", "0"],         // y 轴标签内容
                axisXLabels: ["09年", "10年", "11年", "12年", "13年"],         // x 轴标签内容
                backgroundStyle: {fillColor: "#CCE8CF"},        // 背景样式
                backgroundRadius: [5, 5, 5, 5],        // 背景框圆角参数
                showShadow: true,        //阴影开关 默认是打开
                barShadowStyle:{shadowBlur : 8, shadowOffsetX: 2 , shadowOffsetY : 2,shadowColor : "rgba(100,100,100,0.8)"},        //阴影样式
              //按字段设置柱条样式[渐变开始颜色,渐变终止颜色]  与 themeLayer.themeFields 中的字段一一对应)
                barLinearGradient: [["#00FF00","#00CD00"],["#00CCFF","#5E87A2"],["#00FF66","#669985"],["#CCFF00","#94A25E"],["#FF9900","#A2945E"]]
            }

###1.更改柱条颜色

barLinearGradient - {Array} 按字段设置柱条样式[渐变开始颜色,渐变终止颜色] 与
themeLayer.themeFields 中的字段一一对应)

补充:目前Bar.js存在一点小bug,后续版本会做修改 你可以手动修改其中的第173行

if(typeof (sets.barLinearGradient) !== "undifined") sets.barLinearGradient = deafaultColors;
//修改为
if(typeof (sets.barLinearGradient) === "undefined") sets.barLinearGradient = deafaultColors;

然后设置 barLinearGradient***参数即可
###2.配置坐标轴
Style样式对应于***SuperMap.Feature.ShapeParameters***的子类的样式
iClient for JavaScript---客户端统计专题图_第3张图片
上面的描述
iClient for JavaScript---客户端统计专题图_第4张图片
###3.添加图形
在实际的统计专题图,很多时候大家都想要去添加专题图的标题等其他信息
3.1 添加标题
在***Bar.js***的***assembleShapes
(图表图形装配函数)中,可发现我们的图形都是添加在shapes里面,例如

            // 柱条参数对象(一个面参数对象)
            var barParams = new SuperMap.Feature.ShapeParameters.Polygon(poiLists);
             // 创建柱条并添加到图表图形数组中
            this.shapes.push(this.shapeFactory.createShape(barParams));

从上面可看出,我们想要在柱状图中加入自己定义的图形,只需要两步,一是先定义想要加入的模型;
iClient for JavaScript---客户端统计专题图_第5张图片
二是将其添加在shapes数组里面即可
下面我们就以添加标题为例

			var title=new SuperMap.Feature.ShapeParameters.Label(dvb[0]+50,dvb[3]-10,"统计专题图");                     //制定文本模型  SuperMap.Feature.ShapeParameters.Label(x,y,text)  x为横坐标 y为纵坐标 text为需显示的文本  			
//dvd为统计图表模型的数据视图框,长度为 4 的一维数组,像素坐标,[left, bottom, right, top]
			
			 title.style={stroke: true, strokeColor: "#000", fillColor: "#ee9900",fontSize:18};       
			 //文本样式
			 
            this.shapes.push(this.shapeFactory.createShape(title));  
            // 创建标题并添加到图表图形数组中

其中title的位置,数值具体怎么定,需要根据你设定的图表的宽(width)高(height)来
是不是觉得很简单呀,下面大家也可以动手试试在柱条上添加上具体的数值

你可能感兴趣的:(云GIS)