require(["esri/renderers/ClassBreaksRenderer"], function(ClassBreaksRenderer) { /* code goes here */ });
esri/renderers/Renderer |_esri/renderers/ClassBreaksRenderer
Name | Summary |
---|---|
new ClassBreaksRenderer(defaultSymbol, attributeField) | Creates a new ClassBreaksRenderer object. |
new ClassBreaksRenderer(json) | Creates a new ClassBreaksRenderer. |
Name | Type | Summary |
---|---|---|
attributeField | String | Attribute field renderer uses to match values. |
backgroundFillSymbol | FillSymbol | To symbolize polygon features with graduated symbols, use backgroundFillSymbol to specify a simple fill symbol to represent polygon features, and use marker symbols of varying sizes in class breaks to indicate the quantity. |
breaks | Object[] | Deprecated at v2.0, use infos instead. |
classificationMethod | String | The classification method used to generate class breaks. |
colorInfo | Object | Deprecated. |
defaultSymbol | Symbol | Default symbol used when a value or break cannot be matched. |
infos | Object[] | Each element in the array is an object that provides information about the class breaks associated with the renderer. |
isMaxInclusive | Boolean | Include graphics with attribute values equal to the max value of a class in that class. |
legendOptions | Object | An object containing a title property that describes the variable driving the visualization. |
normalizationField | String | When normalizationType is "field", this property contains the attribute field name used for normalization. |
normalizationTotal | Number | When normalizationType is "percent-of-total", this property contains the total of all data values. |
normalizationType | String | Indicates how the data is normalized. |
opacityInfo | Object | Deprecated. |
rotationInfo | Object | Deprecated. |
sizeInfo | Object | Deprecated. |
valueExpression | String | An Arcade expression evaluating to a number. |
valueExpressionTitle | String | The title identifying and describing the associated Arcade expression as defined in the valueExpression property. |
visualVariables | Object[] | This property allows you to define how to render values in a layer. |
Name | Return type | Summary |
---|---|---|
addBreak(minValueOrInfo, maxValue?, symbol?) | None | Adds a class break. |
clearBreaks() | None | Remove all existing class breaks for this renderer. |
getBreakIndex(graphic) | Number | Returns the index at which rendering and legend information can be found in the break infos array for the given graphic. |
getBreakInfo(graphic) | Object | Returns rendering and legend information (as defined by the renderer) associated with the given graphic. |
getColor(graphic, options?) | Color | Gets the color for the Graphic. |
getOpacity(graphic, options?) | Number | Returns the opacity value for the specified graphic. |
getRotationAngle(graphic, options?) | Number | Returns the angle of rotation (in degrees) for the graphic calculated using rotationInfo. |
getSize(graphic, options?) | Number | Return the symbol size (in pixels) for the graphic, calculated using sizeInfo . |
getSymbol(graphic) | Symbol | Gets the symbol for the Graphic. |
getVisualVariablesForType(type) | Object[] | Returns the visual variable of the specified type. |
hasVisualVariables() | Boolean | Indicates if the renderer has defined visualVariables. |
removeBreak(minValue, maxValue) | None | Removes a break. |
setColorInfo(info) | Renderer | Deprecated. |
setMaxInclusive(enable) | None | A graphic or feature is considered a match for a class break for the first break where the graphic's attribute value is greater than or equal to the class's min value and less than or equal to the class's max value.
Use this method to modify the behavior so that a class break is considered a match only if the attribute value is less than a class's max value. . |
setOpacityInfo(info) | Renderer | Deprecated. |
setRotationInfo(info) | Renderer | Deprecated. |
setSizeInfo(info) | Renderer | Deprecated. |
setVisualVariables(visualParams) | None | Sets the renderer with the specified visualVariables. |
toJson() | Object | Converts object to its ArcGIS Server JSON representation. |
< > defaultSymbol |
Required | Default symbol for the renderer. This symbol is used for unmatched values. This parameter is required but can be null or an empty object. |
< > attributeField |
Required | Specify either the attribute field the renderer uses to match values or starting at version 3.3, a function that returns a value to be compared against class breaks. If a function is specified the renderer will call this function once for every graphic drawn on the map. This can be used in cases where you want class breaks to be compared against a computed value that is not available via the attribute fields. At version 3.0, the Class Breaks renderer can be used to render feature layer tracks. Specify the layer's trackIdField as the attributeField |
require([ "esri/renderers/ClassBreaksRenderer", ... ], function(ClassBreaksRenderer, ... ) { var renderer = new ClassBreaksRenderer(symbol, "POP07_SQMI"); ... }); require([ "esri/renderers/ClassBreaksRenderer", ... ], function(ClassBreaksRenderer, ... ) { var renderer = new ClassBreaksRenderer(defaultSymbol, function(feature){ return feature.attributes.POP07_SQMI; }); ... });
< > json |
Required | JSON object representing the ClassBreaksRenderer. |
require([ "esri/renderers/ClassBreaksRenderer", ... ], function(ClassBreaksRenderer, ... ) { var rend = new ClassBreaksRenderer(inputJson); ... });
String
> attributeFieldattributeField
FillSymbol
> backgroundFillSymbolObject[]
> breaksString
> classificationMethodequal-interval | geometrical-interval | natural-breaks | quantile | standard-deviation
Object
> colorInfovisualVariables
property. colorInfo
>< > colors |
Required | An array of colors defining the color ramp. The first color will be used to render minimum data value, and the last color will be used to render maximum data value. At least two colors are required. If there are three or more colors, the intermediate colors will be placed proportionally between the first and the last to create a multi-color ramp. Note: Specify either colors or stops to construct the color ramp. |
< > field |
Required | Name of the feature attribute field that contains the data value. |
< > legendOptions |
Optional | An object providing options for displaying the color ramp in the legend. See the object specification table for legendOptions below. |
< > maxDataValue |
Required | Maximum data value. |
< > minDataValue |
Required | Minimum data value. |
< > normalizationField |
Optional | Name of the feature attribute field by which the data value will be normalized. |
< > stops |
Optional | An array of objects defining the color ramp. Each object defines a stop on the color ramp. At least two stops are required.
colors or stops to construct the color ramp. If you use stops, then you do not need minDataValue and maxDataValue .
{ var stops = [ { value: 50, color: new Color([255,0,0]), label: "50" } ] } |
< > type |
Required | This value must be colorInfo . |
< > valueExpression |
Optional | An Arcade expression evaluating to a number. This expression can reference field values using the $feature global variable and perform mathematical calculations and logical evaluations at runtime. The values returned from this expression are the data used to drive the visualization. Therefore, this property is typically used as an alternative to field in visual variables. |
< > valueExpressionTitle |
Optional | The title identifying and describing the associated Arcade expression as defined in the valueExpression property. This is displayed as the title of the corresponding color ramp in the Legend in the absence of a provided title in the legendOptions property. |
legendOptions
>< > showLegend |
Optional | Indicates whether to show the color ramp in the legend. |
< > title |
Optional | Text that describes the visualization. This is displayed as the title of the corresponding color ramp in the Legend and takes precedence over the field alias or valueExpressionTitle . |
renderer.setColorInfo({ field: "M086_07", minDataValue: 0, maxDataValue: 100, colors: [ new Color([255, 255, 255]), new Color([127, 127, 0]) ] });
Symbol
> defaultSymbolObject[]
> infos<Number> minValue | The minimum value. |
<Number> maxValue | The maximum value. |
<Symbol> symbol | The symbol used to display the value. |
<String> label | Label for the symbol used to draw the value. |
<String> description | Label for the symbol used to draw the value. |
require([ "esri/_base/array", ... ], function(array, ... ) { //create an array containing the label and symbol for the renderer var symbols = array.map(results[0].layer.renderer.infos,function(info){ return {label: info.label,symbol:info.symbol}; }); ... });
Boolean
> isMaxInclusivesetMaxInclusive(false)
after creating a renderer to change this property if the desired behavior is to make a class include values less than the max value but not equal to the max value. (Added at v3.10)true | false
true
Object
> legendOptionsfieldAlias
or valueExpressionTitle. (Added at v3.19)String
> normalizationFieldnormalizationType
is "field", this property contains the attribute field name used for normalization. (Added at v3.5)Number
> normalizationTotalnormalizationType
is "percent-of-total", this property contains the total of all data values. (Added at v3.5)String
> normalizationTypeattributeField
, is normalized using one of the following functions before it is compared with the class breaks:
normalizationField
property.normalizationTotal
to determine the total value.
With the exception of log normalization, data normalization creates a ratio by dividing two values. When comparing attribute values between features normalization is useful to minimize the effect of varying map area or the number of observations.
For example, dividing the 18 to 30 year old population by the area of a polygon feature yields a density value that can be compared regardless of the size of each feature. Dividing the 18 to 30 year old population by the total population of a feature yields a ratio of people between the ages of 18 and 30 which is comparable regardless of the possibly large differences in total population between the features.
(Added at v3.5)Object
> opacityInfovisualVariables
property. opacityInfo
object. (Added at v3.11)legendOptions
>< > showLegend |
Optional | Indicates whether to show the opacity ramp in the legend. |
< > title |
Optional | Text that describes the visualization. This is displayed as the title of the corresponding opacity ramp in the Legend and takes precedence over the field alias or valueExpressionTitle . |
opacityInfo
>< > field |
Required | Name of the feature attribute field that contains the data value. |
< > legendOptions |
Optional | An object providing options for displaying the opacity ramp in the legend. See the object specification table for legendOptions above. |
< > maxDataValue |
Required | Maximum data value. |
< > minDataValue |
Required | Minimum data value. |
< > normalizationField |
Optional | Name of the feature attribute field used to normalize the data value. |
< > opacityValues |
Required | An array of opacity values. Each value must be a number ranging from 0.0 to 1.0. The first value is used for features with minimum data value (or lower), the last value is used for features with maximum data value (or higher). At least two values are required. If there are three or more, the intermediate ones are applied proportionally between the first and last values. You need to specify either opacityValues or stops. |
< > stops |
Required | An array of objects, each with two properties: value and opacity. At least two stops are required. You need to specify opacityValues or stops. If you specify stops, then you do not need minDataValue and maxDataValue . |
< > type |
Required | This value must be opacityInfo . |
< > valueExpression |
Optional | An Arcade expression evaluating to a number. This expression can reference field values using the $feature global variable and perform mathematical calculations and logical evaluations at runtime. The values returned from this expression are the data used to drive the visualization. Therefore, this property is typically used as an alternative to field in visual variables. |
< > valueExpressionTitle |
Optional | The title identifying and describing the associated Arcade expression as defined in the valueExpression property. This is displayed as the title of the corresponding opacity ramp in the Legend in the absence of a provided title in the legendOptions property. |
var opacityInfo = { field:"fieldname", normalizationField: "normalizationField", minDataValue: 0, maxDataValue: 100, // stops: [ // { value: 10, opacity: 0 }, // { value: 39, opacity: 0.5 }, // { value: 68, opacity: 1 } // ] // OR, you can specify alphaValues using: opacityValues: [ 0, 1 ] };
Object
> rotationInfovisualVariables
property. rotationInfo
>< > field |
Required | Name of the feature attribute field that contains the angle of rotation. Or a function that returns the angle of rotation. A function is useful in cases where the angle of rotation is not available in an attribute field but needs to be computed using a mathematical expression or formula. For example, you can specify a function to compute wind or current direction when the underlying data is stored as U or V vectors. View example below. |
< > rotationType |
Optional | Defines the origin and direction of rotation depending on how the angle of rotation was measured. Can be one of the following:
The default value is "geographic". |
< > type |
Required | This value must be rotationInfo . |
< > valueExpression |
Optional | An Arcade expression evaluating to a number. This expression can reference field values using the $feature global variable and perform mathematical calculations and logical evaluations at runtime. The values returned from this expression are the data used to drive the visualization. Therefore, this property is typically used as an alternative to field in visual variables. |
// field value contains rotation variable var rotationInfo = { type: "rotationInfo", field: "WindDirection", rotationType: "geographic" }; // custom function defines rotation var rotationInfo = { type: "rotationInfo", field: function(graphic){ var U = graphic.attributes.U, V = graphic.attributes.V; //Oceanographic Convention return 360 + (180 / Math.PI) * Math.atan2(U,V); } };
Object
> sizeInfovisualVariables
property. proportionalSymbolInfo
.
See the object specifications table below for a list of its available properties.
In addition, regardless of the type of data described above, you can map a range of data values to a range of symbol sizes.
For point features, maker size is varied in proportion to the data value. For line features, stroke width is varied.
(Added at v3.7)legendOptions
>< > customValues |
Optional | An array of numbers representing the values to use for the stops in the legend. For example, if the size stops in the legend are 13, 171, 286, 404, and 534, you can adjust the stops in the legend to use more rounded numbers by setting them to this property. For example, sizeInfo.legendOptions.customValues = [10, 150, 300, 400, 500] . See the example snippet below. |
< > showLegend |
Optional | Indicates whether to show the size ramp in the legend. |
< > title |
Optional | Text that describes the visualization. This is displayed as the title of the corresponding size ramp in the Legend and takes precedence over the field alias or valueExpressionTitle . |
sizeInfo
>< > expression |
Optional | Deprecated. As of v3.19 use valueExpression instead. Allows a size to be defined based on the scale. "view.scale" is the only expression currently supported. Added at 3.14 |
< > field |
Required | Required name of the feature attribute field that contains the data value. Or a function that returns the data value. |
< > legendOptions |
Optional | An object providing options for displaying the size ramp in the legend. See the object specification table for legendOptions above. |
< > maxDataValue |
Optional | Maximum data value. |
< > maxSize |
Required | Specifies the largest marker size to use at any given map scale. Note: This is required if valueUnit is set to "unknown".
In version 3.13, this could only be set as a number which represented the symbol size in pixels.
Beginning with 3.14, it now is an object that contains:
"maxSize": { "type": "sizeInfo", "expression": "view.scale", "stops": [ {"value": 1128, "size": 80}, {"value": 288895, "size": 80}, {"value": 73957191, "size": 50}, {"value": 591657528, "size": 25} ] } |
< > minDataValue |
Required | Minimum data value (required if valueUnit is "unknown"). |
< > minSize |
Required | Specifies the smallest marker size to use at any given map scale. Note: This is required if valueUnit is set to "unknown".
In version 3.13, this could only be set as a number which represented the symbol size in pixels.
Beginning with 3.14, it now is an object that contains:
"maxSize": { "type": "sizeInfo", "expression": "view.scale", "stops": [ {"value": 1128, "size": 80}, {"value": 288895, "size": 80}, {"value": 73957191, "size": 50}, {"value": 591657528, "size": 25} ] } |
< > normalizationField |
Optional | Name of the feature attribute field used for data normalization. The data value obtained from field is divided by the value obtained from normalizationField before calculating the symbol size. |
< > stops |
Required | Added at 3.14
An array of objects that define the size of the symbol. It takes the following properties:
var stops = [ { "value": 1128, "size": 16 }, { "value": 288895, "size": 16 }, { "value": 73957191, "size": 9 }, { "value": 591657528, "size": 2 } ] |
< > type |
Required | This value must be sizeInfo . |
< > valueExpression |
Optional | An Arcade expression evaluating to a number. This expression can reference field values using the $feature global variable and perform mathematical calculations and logical evaluations at runtime. The values returned from this expression are the data used to drive the visualization. Therefore, this property is typically used as an alternative to field in visual variables. |
< > valueExpressionTitle |
Optional | The title identifying and describing the associated Arcade expression as defined in the valueExpression property. This is displayed as the title of the corresponding size ramp in the Legend in the absence of a provided title in the legendOptions property. |
< > valueRepresentation |
Required | Specifies what the data value measures if it represents a real world distance (required if valueUnit is not "unknown"). The following values are supported:
|
< > valueUnit |
Required | Required unit of measurement if the data represents a real world distance quantity. Valid values are:
"unknown","inches", "feet", "yards", "miles", "nautical-miles", "millimeters", "centimeters", "decimeters", "meters", "kilometers", "decimal-degrees" .
If the data value represents a non-distance quantity (for example traffic count, census data) then valueUnit should be set to "unknown" . |
{ field: "tree_canopy", valueUnit: "meters", valueRepresentation: "diameter" }
//ground area covered by trees measured in square feet. { field: "GroundArea", valueUnit: "feet", valueRepresentation: "area" }Specify
minSize
and maxSize
to smooth out outliers.
Data representing a non-distance quantity.
{ field: "avg_daily_traffic", valueUnit: "unknown", minSize: 1000, minDataValue: 8 }Specify
maxSize
to smooth out outliers.
Map a range of data values to a range of symbol sizes:
{ field: "avg_daily_traffic", valueUnit: "unknown", minSize: 1, maxSize: 10, minDataValue: 1000, maxDataValue: 100000 }To use legendOptions:
renderer.sizeInfo({ field: "POP_PER_DOC", minSize: 2, maxSize: 20, minDataValue: 100, maxDataValue: 10000, valueUnit: "unknown", legendOptions: { customValues: [100, 200, 300, 10000] } });
String
> valueExpression$feature
global variable and perform mathematical calculations and logical evaluations at runtime. This property is typically used as an alternative to attributeField. (Added at v3.19)String
> valueExpressionTitletitle
in the legendOptions property. (Added at v3.19)Object[]
> visualVariablestype
property of the visual variable object to colorInfo. Then define the rest of the object using the colorInfo object specification table.NOTE:This does not apply to VectorFieldRenderer
.type
property of the visual variable object to sizeInfo. Then define the rest of the object using the sizeInfo object specification table.type
property of the visual variable object to opacityInfo. Then define the rest of the object using the opacityInfo object specification table.type
property of the visual variable object to rotationinfo. Then define the rest of the object using the rotationInfo object specification table."visualVariables": [ { "type": "colorInfo", "field": "M086_07", "normalizationField": "AREA", "stops": [ { "value": 0, "color": new Color([255,255,255]), "label": "< 30.900" }, { "value": 100, "color": new Color([127,127,0]), "label": "37.415" } ] }]Size example:
"visualVariables": [ { "type": "sizeInfo", "field": "pop2000", "minDataValue": 493782, "maxDataValue": 33871648, "valueUnit": "unknown", "minSize": { "type": "sizeInfo", "expression": "view.scale", "stops": [ { "value": 1128, "size": 16 }, { "value": 288895, "size": 16 }, { "value": 73957191, "size": 9 }, { "value": 591657528, "size": 2 } ] }, "maxSize": { "type": "sizeInfo", "expression": "view.scale", "stops": [ { "value": 1128, "size": 80 }, { "value": 288895, "size": 80 }, { "value": 73957191, "size": 50 }, { "value": 591657528, "size": 25 } ] } }]Opacity example:
{ "type": "opacityInfo", "field": "PCP", "stops": [{ "value": 0, "opacity": 100 }, { "value": 10, "opacity": 0 }] }Rotation example:
{ "type": "rotationInfo", "field": "Rotate", "rotationType": "arithmetic" }
< > minValueOrInfo |
Required | The value can be provided as individual arguments or as an info object. See the object specifications table below for the structure of the info object |
< > maxValue |
Optional | Maximum value in the break. |
< > symbol |
Optional | Symbol used for the break. |
minValueOrInfo
>< > description |
Required | Description for the symbol used to draw the label |
< > label |
Required | The label for the symbol used to draw the value |
< > maxValue |
Required | The maximum value |
< > minValue |
Required | The minimum value |
< > symbol |
Required | The symbol used to display the value |
renderer.addBreak(2, 5, symbol);Specify the minimum and maximum values and symbol as an info object.
renderer.addBreak({ minValue: 2, maxValue: 5, symbol: symbol, label: "Low Density" });
Number
< > graphic |
Required | The graphic whose rendering and legend information index in the break infos array will be returned. |
Object
< > graphic |
Required | The graphic whose rendering and legend information will be returned. |
Color
< > graphic |
Required | Graphic to get color from. |
< > options |
Optional | This optional parameter supports colorInfo . If none is provided, the Renderer.colorInfo will be used. |
Number
< > graphic |
Required | Returns the opacity value appropriate for the given graphic. This value is calculated based on the opacityInfo definition. |
< > options |
Optional | This optional parameter supports opacityInfo . If none is provided, the Renderer.opacityInfo will be used. |
Number
< > graphic |
Required | An input graphic for which you want to get the angle of rotation. |
< > options |
Optional | This optional parameter supports rotationInfo . If none is provided, the Renderer.rotationInfo will be used. |
sizeInfo
. (Added at v3.7)Number
< > graphic |
Required | The graphic for which you want to calculate the symbol size. |
< > options |
Optional | This optional parameter supports sizeInfo . If none is provided, the Renderer.sizeInfo will be used.
|
Symbol
< > graphic |
Required | Graphic to symbolize. Used when creating a custom renderer. |
Object[]
< > type |
Required | The type of visual variable desired. Supported Values: colorInfo (does not apply to VectorFieldRenderer ) | sizeInfo | opacityInfo |
var colorVisVar = renderer.getVisualVariablesForType('colorInfo');
Boolean
colorInfo
property. (Added at v3.8)Renderer
< > info |
Required | An info object that defines the color. It has the same properties as colorInfo . |
renderer.setColorInfo({ field:"fieldname", minDataValue: 0, maxDataValue: 100, colors: [ new Color([255, 255, 255]), new Color([127, 127, 0]) ], //stops: [ // { value: 10, color: new Color([0, 0, 0, 0]) }, // -1 stddev // { value: 39, color: new Color([0, 128, 64]) }, // average // { value: 68, color: new Color([255, 0, 0, 0.8]) } // 1 stddev //] });
< > enable |
Required | Set true to enable the max inclusive behavior. |
info
parameter. The info parameter is an object with the same properties as opacityInfo.
(Added at v3.11)Renderer
< > info |
Required | The info parameter is an object with the same properties as opacityInfo. |
renderer.setOpacityInfo({ field:"fieldname", minDataValue: 0, maxDataValue: 100, // stops: [ // { value: 10, opacity: 0 }, // { value: 39, opacity: 0.5 }, // { value: 68, opacity: 1 } // ] // OR, you can specify alphaValues using: opacityValues: [ 0, 1 ] });
rotationInfo
. (Added at v3.7)Renderer
< > info |
Required | An object with the same properties as rotationInfo. |
renderer.setRotationInfo({ field: "WIND_DIRECT" });
info
object has the same properties as sizeInfo
.
type
only applies if rendering sizeInfo using visualvariables. setProportionalSymbolInfo
.
Renderer
renderer.setSizeInfo({ field:"WIND_SPEED", minSize:3, maxSize:20, minDataValue:5, maxDataValue:50 }); layer.setRenderer(renderer);
< > visualParams |
Required | The specified visualVariables. |
//This specific example uses sizeInfo. renderer.setVisualVariables([{ type: "sizeInfo", field: "TOTPOP_CY", minSize: 5, maxSize: 50, minDataValue: 50, maxDataValue: 1000 }]);
Object