公告:所有在
2025 年 4 月 15 日之前注册使用 Earth Engine 的非商业项目都必须
验证是否符合非商业性质的资格条件,才能继续使用 Earth Engine。
ui.Chart.style
使用集合让一切井井有条
根据您的偏好保存内容并对其进行分类。
返回微件的样式 ActiveDictionary,该对象可修改以更新微件的样式。
行为与 CSS 对应项类似的属性:
- height、maxHeight、minHeight(例如“100px”)
- width、maxWidth、minWidth(例如“100px”)
- 内边距、外边距(例如“4px 4px 4px 4px”或简单的“4px”)
- color、backgroundColor(例如“red”或“#FF0000”)
- 边框(例如“1px solid black”)
- borderColor(例如“red black blue #FF0000”)
- borderRadius(例如“10px”)
- borderStyle(例如“solid dashed none dotted”)
- borderWidth(例如“1px 0px 1px 0px”)
- fontSize(例如“24px”)
- fontStyle(例如“italic”)
- fontWeight(例如“bold”或“100”)
- fontFamily(例如“monospace”或“serif”)
- textAlign(例如“left”或“center”)
- textDecoration(例如“underline”或“line-through”)
- whiteSpace(例如“nowrap”或“pre”)
- 显示(true 或 false)
支持的自定义布局属性(请参阅 ui.Panel.Layout 文档):
- stretch(“horizontal”“vertical”“both”)
- 位置('top-right'、'top-center'、'top-left'、'bottom-right'、...)
用法 | 返回 |
---|
Chart.style() | ui.data.ActiveDictionary |
参数 | 类型 | 详细信息 |
---|
this:ui.widget | ui.Widget | ui.Widget 实例。 |
示例
Code Editor (JavaScript)
// Define a UI widget and add it to the map.
var widget = ui.Chart([['x', 'y'], [0, 0], [100, 100]]);
Map.add(widget);
// View the UI widget's style properties; an ActiveDictionary.
print(widget.style());
// ActiveDictionaries are mutable; set a style property.
widget.style().set('width', '400px');
print(widget.style());
// Define the UI widget's style ActiveDictionary as a variable.
var widgetStyle = widget.style();
print(widgetStyle);
// Set the UI widget's style properties from the ActiveDictionary variable.
widgetStyle.set({border: '5px solid darkgray'});
print(widgetStyle);
如未另行说明,那么本页面中的内容已根据知识共享署名 4.0 许可获得了许可,并且代码示例已根据 Apache 2.0 许可获得了许可。有关详情,请参阅 Google 开发者网站政策。Java 是 Oracle 和/或其关联公司的注册商标。
最后更新时间 (UTC):2025-07-25。
[null,null,["最后更新时间 (UTC):2025-07-25。"],[[["\u003cp\u003e\u003ccode\u003ewidget.style()\u003c/code\u003e returns an ActiveDictionary that can be used to get and set the widget's style properties, similar to CSS.\u003c/p\u003e\n"],["\u003cp\u003eMany standard CSS properties like \u003ccode\u003ewidth\u003c/code\u003e, \u003ccode\u003ecolor\u003c/code\u003e, \u003ccode\u003efontSize\u003c/code\u003e, and others are supported for styling widgets.\u003c/p\u003e\n"],["\u003cp\u003eCustom layout properties like \u003ccode\u003estretch\u003c/code\u003e and \u003ccode\u003eposition\u003c/code\u003e are also available to control widget layout within a panel.\u003c/p\u003e\n"],["\u003cp\u003eThe returned ActiveDictionary is mutable, allowing direct modification of style properties that immediately update the widget's appearance.\u003c/p\u003e\n"],["\u003cp\u003eStyle properties can be set individually using \u003ccode\u003estyle().set('property', 'value')\u003c/code\u003e or in bulk using an object with \u003ccode\u003estyle().set({property: value, ...})\u003c/code\u003e.\u003c/p\u003e\n"]]],["The `widget.style()` method returns an `ActiveDictionary` that controls a widget's styling. Properties such as `height`, `width`, `padding`, `color`, `border`, `fontSize`, `fontFamily`, `textAlign`, `textDecoration`, `whiteSpace`, and `shown` are supported, mirroring CSS. Layout can be customized with `stretch` and `position`. The returned `ActiveDictionary` is mutable, allowing style modifications via `set()` and updates to the widget's appearance. Changes can be made directly to the return value or by asigning the `ActiveDictionary` to a variable.\n"],null,["# ui.Chart.style\n\n\u003cbr /\u003e\n\nReturns the widget's style ActiveDictionary, which can be modified to update the widget's styles.\n\n\u003cbr /\u003e\n\nProperties which behave like their CSS counterparts:\n\n- height, maxHeight, minHeight (e.g. '100px')\n\n- width, maxWidth, minWidth (e.g. '100px')\n\n- padding, margin (e.g. '4px 4px 4px 4px' or simply '4px')\n\n- color, backgroundColor (e.g. 'red' or '#FF0000')\n\n- border (e.g. '1px solid black')\n\n- borderColor (e.g. 'red black blue #FF0000')\n\n- borderRadius (e.g. '10px')\n\n- borderStyle (e.g. 'solid dashed none dotted')\n\n- borderWidth (e.g. '1px 0px 1px 0px')\n\n- fontSize (e.g. '24px')\n\n- fontStyle (e.g. 'italic')\n\n- fontWeight (e.g. 'bold' or '100')\n\n- fontFamily (e.g. 'monospace' or 'serif')\n\n- textAlign (e.g. 'left' or 'center')\n\n- textDecoration (e.g. 'underline' or 'line-through')\n\n- whiteSpace (e.g. 'nowrap' or 'pre')\n\n- shown (true or false)\n\nSupported custom layout properties (see ui.Panel.Layout documentation):\n\n- stretch ('horizontal', 'vertical', 'both')\n\n- position ('top-right', 'top-center', 'top-left', 'bottom-right', ...)\n\n| Usage | Returns |\n|-----------------|--------------------------|\n| Chart.style`()` | ui.data.ActiveDictionary |\n\n| Argument | Type | Details |\n|-------------------|-----------|-------------------------|\n| this: `ui.widget` | ui.Widget | The ui.Widget instance. |\n\nExamples\n--------\n\n### Code Editor (JavaScript)\n\n```javascript\n// Define a UI widget and add it to the map.\nvar widget = ui.Chart([['x', 'y'], [0, 0], [100, 100]]);\nMap.add(widget);\n\n// View the UI widget's style properties; an ActiveDictionary.\nprint(widget.style());\n\n// ActiveDictionaries are mutable; set a style property.\nwidget.style().set('width', '400px');\nprint(widget.style());\n\n// Define the UI widget's style ActiveDictionary as a variable.\nvar widgetStyle = widget.style();\nprint(widgetStyle);\n\n// Set the UI widget's style properties from the ActiveDictionary variable.\nwidgetStyle.set({border: '5px solid darkgray'});\nprint(widgetStyle);\n```"]]