FooterLine: PP.Ui.LineLabel;
The FooterLine property determines a line near the legend footer.
Property value is set from JSON.
To execute example, create the HTML page and execute the following operations:
1. Add links to the following JS and CSS files in the <head> tag:
PP.js.
PP.GraphicsBase.js.
PP.css.
2. Specify settings of the container where legend is located in the <body> tag:
<body onresize="onresize()"> <div id="container" style="position: absolute; top: 50px; left: 50px; width: 900px; height: 700px; border: solid 1px #888"> </div> </body>
3. Add a scenario to create a legend in the <script> tag:
<script type="text/javascript"> // Set legend size var Area = new PP.Rect({ Top: 0, Left: 0, Width: 900, Height: 700 }); // Set value scale var Scale = new PP.ScaleBase({ "Id": "Scale0", "Values": "0.0 30.0 60.0 100.0", "Items": "#FF00FF00 #FF40D000 #FF808000 #FFD04000 #FFFF0000", "EnableEquality": "false", "NoData": "#FF808080", "TypeArguments": "Brush" }); // Determine legend settings var Settings = { Scale: Scale, //value scale AutoColumnsCount: false, MaxHeight: 50, MaxWidth: 30, MaxHeaderWidth: 20, Style: { Release: { Background: { PPType: PP.SolidColorBrush, Color: "#80F0F0F0" }, "Font": { "IsItalic": "false", "FontFamily": "Arial", "Size": "20", "IsBold": "false", "Color": "#FF000000" } } }, LessFormat: "less than {0:#,##0.00}", // value labels GreaterFormat: "greater than {0:#,##0.00}", BetweenFormat: "from {0:#,##0.00} to {1:#,##0.00}", NoDataText: "no data", TextWrapping: "NoWrap", TextSpacing: "10", Marker: "Circle", IsOuter: "False", IsOverlap: "False", ColumnCount: "3", // number of columns with legend values HorizontalAlignment: "Top", // legend position in container VerticalAlignment: "Top", Padding: "4 4 4 4", // paddings between values Margin: "6 6 6 6", Header: { // legend header Text: "Header", Margin: "2 2 2 2", Padding: "2 2 2 2", HorizontalAlignment: "Left", Style: { Release: { Font: { IsItalic: "False", FontFamily: "Arial", Size: "15", IsBold: false, Color: "#FF008000" } } } }, Footer: { // Legend footer Text: "Footer", HorizontalAlignment: "Left", Margin: "2 2 2 2", Padding: "2 2 2 2", }, FooterLine: new PP.Ui.LineLabel({ // line near footer // Set line width LineHeight: 1, // Set line color LineColor: PP.Color.Colors.darkviolet }), HeaderLine: new PP.Ui.LineLabel({ // line near header // Set line width LineHeight: 1, // Set line color LineColor: PP.Color.Colors.darkviolet }), ParentNode:document.getElementById('container') }; // Apply all settings for legend and draw it in container var legend = new PP.Ui.IntervalsLegend(Settings); legend.draw(Area); </script>
After executing the example the HTML page will contain a legend with specified parameters:
See also: