pentaho cde 画图参数介绍

 

由于在国内的资料很少，唯有看英文文档，做了N次反复尝试，挖掘了pentaho CDE中画图的一些基本参数。 

下面就列出来了一些常用参数介绍： 

 

crosstabMode：表明如果数据源是交叉表的格式,反之为关系格式。 

      为true的时候能显示多种对比数据 

//pie chart 

selectable:说明图表的视觉元素是否能被用户选择 

hoverable：鼠标移动上去突出并且高亮显示 

tooltipClassName： 提示 

tooltipOpacity：提示透明度 

legend：主图表的图例说明（默认为false） 

legendShape: 形状 

legendSize:  宽度 

legendArea_fillStyle: 填充样式颜色 

legendFont: 文字大小，字体legendPosition：图例说明位置 

legendTextMargin:图例说明文字和图表之间的间隔 

 

animate：渲染窗口，是否以动画状态展开  interactive为true的时候生效 

interactive：和用户交互（弹窗，tips，高亮，可选，点击，双击） 

 

explodedSliceIndex：向外扩散的索引 

explodedSliceRadius：切片半径（大了会向外扩散） 

 

extensionPoints：扩展属性 

slice_innerRadiusEx：切片内部半径 

slice_strokeStyle：切片画图的颜色（也就是边框颜色） 

 

valuesFont：指标文字样式 

valuesVisible：指标文字显示与否 

valuesLabelStyle: 文字显示位置 

valuesMask: "{category}"显示文字属性样式 

valuesOverflow: 'trim',当超过边缘时隐藏或显示属性值（inside时可用） 

valuesOptimizeLegibility: 字体易读性的最佳化。在某些字体，某些字号（不能太大）的情况下，能看出分别来。 

valuesNormalized：标准化 

 

//bar charts 

//Cartesian axes 

orientation：排列方向（水平，垂直） 

axisGrid：轴网格显示与否 

axisLabel_font:轴部字体 

axisGrid_strokeStyle:轴网格画笔颜色 

axisOffset：轴部网格数量 

orthoAxisOffset：正交坐标图的偏移量 

continuousAxisTicks_strokeStyle：坐标轴齿轮颜色 

 

baseAxisLabel_textAngle：轴底部文字方向 

baseAxisLabel_textAlign：轴底部文字方向 

baseAxisLabel_textBaseline：轴底部文字方向 

 

 

stacked：柱子是否叠加 

barStackedMargin:柱子叠加间隔距离 

orthoAxisFixedMax：Y轴的最大值 

orthoAxisLabelSpacingMin：Y轴空间间隔最小值 

axisRule_strokeStyle：坐标系的颜色 

baseAxisTooltipAutoContent：坐标值的tips 

baseAxisTicks： 

 

colors：柱体颜色 

color2AxisColors：线形图颜色 

 

 

rubberBand_strokeStyle: 'RGB(220,20,60)', 

rubberBand_fillStyle:   'rgba(0,0,0, 0.1)', 

rubberBand_lineWidth:   5.5, 

plotFrameVisible: false,图形周围的框架是否显示 

 

timeSeries：数据合并 

timeSeriesFormat: '%Y-%m-%d-%H',数据序列化 

 

 

plot2：二次视图的开关 

plot2Series：系列视觉中的关键值，即在二次图中所示 

plot2OrthoAxis: 2,正交笛卡尔轴的索引，1,2,3（第几列作为第二视图的数据） 

plot2NullInterpolationMode: 'Zero', 二次线形图点为空的时候虚线填充 

plot2Line_lineWidth: 2,//线的宽度 

plot2Dot_shapeSize:  7,//点的形状大小 

orthoAxisGrid:true正轴的十字交叉，显示纵轴刻度线 

baseAxisGrid:true显示横轴的刻度线 

areasVisible:true折线图下部分填充区域颜色 

hoverable:true鼠标移上是否突出显示 

 

readers：tooltips属性列表的列，可以是逗号分隔的字符串，一般情况下是数组 

 

 

 

//Trend plot  趋势图 

trendType: 'moving-average',//趋势图类型 

trendAreasVisible: false,//区域显示与否 

trendColorAxis: 3,//趋势颜色？ 

trendLine_interpolate: 'cardinal', 

trendArea_interpolate: 'cardinal', 

 

 

plot_fillStyle：点图填充背景色 

dot_shape：点的形状 

dot_fillStyle：点的填充颜色 

dot_strokeStyle：点边框的颜色 

dot_shapeRadius：点的半径（大小） 

 

baseAxisLabel_textStyle：轴部文字的颜色 

baseAxis_fillStyle：轴部文字的填充色 

orthoAxisLabel_textAlign：底部字体的位置 

 

dataCategoriesCount：列分组 

readers:一个尺寸名称列表加载相应的逻辑列表。 

visualRoles：视觉中的属性，指派category和value的值 

dataMeasuresInColumns：列数据或行数据 

isMultiValued：是否为多重数据，为true时结果不累加 

 

这个主要是控制tooltips显示参数的 

    dimensions: { 

        // Explicitly define the "measure" dimension 

        // (change the defaults that would otherwise take effect) 

//轴部说明文字的改变 

        measure: { 

            // Hide "measure" from the tooltip 

            isHidden: true, 

 

            // Fine tune the labels 

            formatter: function(v) { 

                switch(v) { 

                    case 'Count':      return "Count"; 

                    case 'AvgLatency': return "Avg. Latency"; 

                } 

                return v + ''; 

            } 

        } 

    }, 

 

//轴部文字间隔符 

    legend: { 

        scenes: { 

           item: { 

                value: function() { 

                    var valueVar = this.base(); 

                    // Add the measure label to 

                    // the "value" variable's label 

                    valueVar.label += " /? " + this.firstAtoms.measure; 

                    return valueVar; 

                } 

            } 

        } 

    }, 

//更改tooltips的属性名称 

function (){ 

    this.chartDefinition.dimensions={ 

       category:{label:'名称'}, 

       value:{label:'值'}, 

       series:{isHidden: true}, 

       measure:{isHidden: false,           

       formatter: function(v) { 

                switch(v) { 

                    case 'Count':      return "数量"; 

                    case 'AvgLatency': return "Avg. Latency"; 

                } 

                return v + '111'; 

            }} 

    } 

} 

 

function (){ 

    this.chartDefinition.dimensions={ 

       category:{label:'分数段'}, 

       value:{label:'人数'}, 

       series:{isHidden: true}, 

    } 

} 

 

实在是不好排版，ctrl +f 很方便拉 

 

实践补充：

柱图

legendLabel_textStyle    white 设置legend文字的颜色

slice_innerRadiusEx       65     切片内部半径

 

baseAxisLabel_textStyle        white

orthoAxisLabel_textStylewhite

 

打开

http://webdetails.github.io/ccc/

到最下面，查看

EXTENSION POINTS

例如:

http://webdetails.github.io/ccc/charts/jsdoc/symbols/pvc.options.ext.PiePlotExtensionPoints.html

 

查看属性，如下面的例子进行配置

 

To use an extension point you must find its full name, by joining:

 

plot property name (ex: pie)

extension property (ex: slice)

the "_" character

extension sub-property (ex: strokeStyle)

and obtaining, for the examples, the camel-cased name: pieSlice_strokeStyle (see http://en.wikipedia.org/wiki/CamelCase).

如果页面无法打开，请下载

下载https://github.com/webdetails/website-pentaho-community/tree/master/ctools

 

 

trend

作为线图下面的块状用的

 

渐变色

area_fillStyle: linear-gradient(to top,#030227,#5276FF)

线图设置：

dot_shape: Circle 设置点

dot_shapeRadius:5 设置点大小

dot_strokeStyle: #5276FF  设置线的颜色

dot_fillStyle: rgba(3,2,39,1) 设置背景色

                  : transparent 设置为透明色

 

 

 

line_strokeStyle:#5276FF   设置线图的颜色

area_fillStyle:linear-gradient(to top,#030227,#5276FF)  设置渐变色

axisGrid_strokeStyle:#202F69    设置背景色

label_textStyle:#1BB5FF           设置颜色

 

 

 

柱图，线图

 

如果Y轴需求上，不能0开始

orthoAxisOriginIsZero: False

orthoAxisZeroLine: False

 

柱图，数字需要在柱子上面显示:

label_textBaseline : bottom

valuesAnchor : top

 

 

标题和图的margin设置

分为两段:

titleMargins:24 0 29 20

contentMargins:0 200 27 200

 

 

柱图，线图等边框设置

plotFrameVisible : False 设为false

baseAxisRule_strokeStyle : white 设置为白色

orthoAxisRule_strokeStyle : white 设置为白色

X轴设置为白色，Y轴设置为白色

 

 

 

 

 

 

 

 

 

 

 

bar图中，同时实现柱图和线图

使用Series作为统一的X轴

主要设置SeriesRole和plot2SeriesIndexes

注意这里:SeriesRole设置字段，

plot2SeriesIndexes 设置的是Y轴的量表

 

 

 

 

 

 

 

 

数据格式化:

http://diethardsteiner.github.io/ccc/2015/04/15/Pentaho-CCC-Chart-Label-Formatting.html