请查看类参考,iClient for JavaScript柱状图不支持标题,可以自己改引入的对应js;服务端柱状图支持每个柱子显示文本,见示例,不支持专题图标题.
iClient for JavaScript的柱状图可以自己修改js,具体见注释。
以这个示例为例,修改引用的js文件:
在 assembleShapes 方法中增加要添加的项即可。以下代码给每个柱子顶部添加文本:
/**
* Method: assembleShapes
* 图表图形装配函数
*/
assembleShapes: function(){
//默认渐变颜色数组
var deafaultColors = [["#00FF00","#00CD00"],["#00CCFF","#5E87A2"],["#00FF66","#669985"],["#CCFF00","#94A25E"],["#FF9900","#A2945E"]];
//默认阴影
var deafaultShawdow = {showShadow: true ,
shadowBlur : 8,
shadowColor : "rgba(100,100,100,0.8)",
shadowOffsetX: 2 ,
shadowOffsetY : 2};
// 图表配置对象
var sets = this.setting;
if(typeof (sets.barLinearGradient) !== "undifined") sets.barLinearGradient = deafaultColors;
// 默认数据视图框
if(!sets.dataViewBoxParameter){
if(typeof(sets.useAxis) === "undefined" || sets.useAxis){
sets.dataViewBoxParameter = [45, 15, 15, 15];
}
else{
sets.dataViewBoxParameter = [5, 5, 5, 5];
}
}
// 重要步骤:初始化参数
if(!this.initBaseParameter()) return;
// 值域
var codomain = this.DVBCodomain;
// 重要步骤:定义图表 Bar 数据视图框中单位值的含义
this.DVBUnitValue = (codomain[1]-codomain[0])/this.DVBHeight;
// 数据视图域
var dvb = this.dataViewBox;
// 用户数据值
var fv = this.dataValues;
if(fv.length < 1) return; // 没有数据
// 数据溢出值域范围处理
for(var i = 0, fvLen = fv.length; i < fvLen; i++){
if(fv[i] < codomain[0] || fv[i] > codomain[1]) return;
}
// 获取 x 轴上的图形信息
var xShapeInfo = this.calculateXShapeInfo();
if(!xShapeInfo) return;
// 每个柱条 x 位置
var xsLoc = xShapeInfo.xPositions;
// 柱条宽度
var xsWdith = xShapeInfo.width;
// 背景框,默认启用
if(typeof(sets.useBackground) === "undefined" || sets.useBackground){
// 将背景框图形添加到模型的 shapes 数组,注意添加顺序,后添加的图形在先添加的图形之上。
this.shapes.push(SuperMap.Feature.ShapeFactory.Background(this.shapeFactory, this.chartBox, sets));
}
// 坐标轴, 默认启用
if(typeof(sets.useAxis) === "undefined" || sets.useAxis){
// 添加坐标轴图形数组
this.shapes = this.shapes.concat(SuperMap.Feature.ShapeFactory.GraphAxis(this.shapeFactory, dvb, sets, xShapeInfo));
}
console.log("图表配置对象:\n",sets,"\n当前绘制要素数据:\n",this.data,"\n要素属性:\n",this.fields,"\n要素值:\n",fv,"\n---------------------\n");
for(var i = 0; i < fv.length; i++){
// 计算柱条 top 边的 y 轴坐标值
var yPx = dvb[1] - (fv[i] - codomain[0])/this.DVBUnitValue;
// 柱条节点数组
var poiLists = [
[xsLoc[i] - xsWdith/2, dvb[1]-1],
[xsLoc[i] + xsWdith/2, dvb[1]-1],
[xsLoc[i] + xsWdith/2, yPx],
[xsLoc[i] - xsWdith/2, yPx]
];
// 柱条参数对象(一个面参数对象)
var barParams = new SuperMap.Feature.ShapeParameters.Polygon(poiLists);
var lable=new SuperMap.Feature.ShapeParameters.Label(xsLoc[i] - xsWdith/2,yPx - 10,fv[i]);
//默认文本样式http://support.supermap.com.cn:8090/iserver/iClient/forJavaScript/apidoc/files/SuperMap/Feature/ShapeParameters/Label-js.html#SuperMap.Feature.ShapeParameters.Label.style
lable.style=typeof(sets.lableStyle)==="undefined"||!sets.lableStyle?{
fillColor:"blue"
}:sets.lableStyle;
//默认高亮样式http://support.supermap.com.cn:8090/iserver/iClient/forJavaScript/apidoc/files/SuperMap/Feature/ShapeParameters/Label-js.html#SuperMap.Feature.ShapeParameters.Label.highlightStyle
lable.highlightStyle=typeof(sets.lableHighlightStyle)==="undefined"||!sets.lableHighlightStyle?{
fillColor:"red"
}:sets.lableHighlightStyle;
// 柱条 阴影 style
if(typeof(sets.showShadow) === "undefined" || sets.showShadow){
if(sets.barShadowStyle){
var sss = sets.barShadowStyle;
if(sss.shadowBlur) deafaultShawdow.shadowBlur = sss.shadowBlur;
if(sss.shadowColor) deafaultShawdow.shadowColor = sss.shadowColor;
if(sss.shadowOffsetX) deafaultShawdow.shadowOffsetX = sss.shadowOffsetX;
if(sss.shadowOffsetY) deafaultShawdow.shadowOffsetY = sss.shadowOffsetY;
}
barParams.style = {};
SuperMap.Util.copyAttributesWithClip(barParams.style, deafaultShawdow);
SuperMap.Util.copyAttributesWithClip(lable.style, deafaultShawdow);
}
// 图形携带的数据信息
barParams.refDataID = this.data.id;
barParams.dataInfo = {
field: this.fields[i],
value: fv[i]
};
// 柱条 hover click
if(typeof(sets.barHoverAble) !== "undefined"){
barParams.hoverable = sets.barHoverAble;
}
if(typeof(sets.barClickAble) !== "undefined"){
barParams.clickable = sets.barClickAble;
}
// 创建柱条并添加到图表图形数组中
this.shapes.push(this.shapeFactory.createShape(barParams));
this.shapes.push(this.shapeFactory.createShape(lable));
}
// 重要步骤:将图形转为由相对坐标表示的图形,以便在地图平移缩放过程中快速重绘图形
// (统计专题图模块从结构上要求使用相对坐标,assembleShapes() 函数必须在图形装配完成后调用 shapesConvertToRelativeCoordinate() 函数)
this.shapesConvertToRelativeCoordinate();
},