每个专题柱性图怎么加标题?是lable吗?

0 投票
6月 14, 2017 分类:  430次浏览 | 用户: winwcy (4 分)

1个回答

0 投票
 
已采纳

请查看类参考,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();
    },

6月 14, 2017 用户: 毛瑞 名扬四海 (1,780 分)
采纳于 6月 15, 2017 用户:winwcy

注意查看,传入参数比如:
 

            // 配置图表参数
            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"]],
                lableStyle:{
                    fillColor:"#00CCFF",
                    fontSize:20
                },
                lableHighlightStyle:{
                    fillColor:"#00FF66"
                }
            };

详见代码注释,图表内的每一项都是ShapeParameters的子类。
所以你可以做出这些形状任意组合的图表了。

请问,如果我想按照柱子绑定值,控制柱子的颜色,怎么写?
发现dataStyleBycodomain和barStyleBycodomain都不好使
...