要素图层的图表

# ArcGIS 图表使用“@arcgis/charts-components”包将图层数据可视化为图表（条形图、折线图、饼图、直方图、散点图等）时，请使用此技能。这是 **5.0** 中的新组件包，没有 4.x 等效项。 ## 导入模式 ### CDN（无构建工具） <脚本src =“https://js.arcgis.com/5.0/”> ### 直接 ESM 导入（构建工具）导入“@arcgis/charts-components/components/arcgis-chart”；导入“@arcgis/charts-components/components/arcgis-charts-action-bar”； ### 图表模型（用于编程配置）从“@arcgis/charts-components/model”导入 { BarChartModel }；从“@arcgis/charts-components/model”导入{ PieChartModel }；从“@arcgis/charts-components/model”导入 { LineChartModel }；从“@arcgis/charts-components/model”导入{ HistogramModel }；从“@arcgis/charts-components/model”导入{ ScatterplotModel }；从“@arcgis/charts-components/model”导入 { BoxPlotModel }；从“@arcgis/charts-components/model”导入{ GaugeModel }；从“@arcgis/charts-components/model”导入{ RadarChartModel }；从“@arcgis/charts-components/model”导入{ HeatChartModel }；从“@arcgis/charts-components/model”导入 { ComboBarLineChartModel }； ## 支持的图表类型图表类型 |模型类|描述 ---|---|--- 酒吧| `条形图模型` |水平或垂直条形图线路| `折线图模型` |带系列的折线图馅饼| `饼图模型` |饼图和圆环图直方图| `直方图模型` |频率分布直方图分散| `散点图模型` |散点图和气泡图箱线图| `BoxPlotModel` |箱线图和须线图仪表| `仪表模型` |仪表/车速表图表雷达| `雷达图模型` |雷达/蜘蛛图热图 | `热图模型` |热/矩阵图组合 | `ComboBarLineChartModel` |组合条形图和折线图 ## arcgis-chart 组件 ### 核心属性物业 |属性 |类型 |默认 |描述 ---|---|---|---|--- `模型` | - | `图表模型|网络图表` | - |图表配置模型（通过JS设置） `层` | - | `FeatureLayerView|支持层` | - |数据源层（通过JS设置） `视图` | - | `地图视图|场景视图` | - |地图/场景视图参考（通过JS设置） `layerItemId` | `图层项目 ID` | `字符串` | - |图层门户项目 ID（替代“图层”） `图表索引` | `图表索引` | `数字` | - |当图层有多个图表时要渲染的图表索引 `动作模式` | `动作模式` | `字符串` | - |交互模式：`"缩放"`、`"multiSelection"`、`"multiSelectionWithCtrlKey"`、`"平移"` ### 显示属性物业 |属性 |类型 |默认 |描述 ---|---|---|---|--- `禁用交互` | `禁用交互` | `布尔值` | `假` |禁用所有图表交互 `启用配置` | `启用配置` | `布尔值` | `假` |启用内置图表配置 UI `启用响应式功能` | `启用响应式功能` | `布尔值` | - |启用响应行为 `使用动画图表` | `使用动画图表` | `布尔值` | - |启用图表动画 `隐藏空系列` | `隐藏空系列` | `布尔值` | - |隐藏没有数据的系列 `隐藏许可证水印` | `隐藏许可证水印` | `布尔值` | - |隐藏许可证水印 `隐藏LoaderAnimation` | `隐藏加载动画` | `布尔值` | - |隐藏加载动画 `占位符` | `占位符` | `字符串` | - |无数据时的占位符文本 `showUIMessages` | `显示 ui 消息` | `布尔值` | - |显示面向用户的消息 `错误策略` | `错误策略` | `字符串` | `“扔”` |错误处理：“抛出”或“忽略” ### 数据和过滤属性物业 |属性 |类型 |默认 |描述 ---|---|---|---|--- `按范围过滤` `按范围过滤` | `布尔值` | - |按当前地图范围过滤图表数据 `按选择过滤` `按选择过滤` | `布尔值` | - |通过地图选择过滤图表数据 `同步选择` | `同步选择` | `布尔值` | `假` |图表和地图之间的同步选择 `运行时数据过滤器` | - | `WebChartDataFilters` | - |运行时数据过滤器（通过JS设置） `选择数据` | - | `选择数据` | - |当前选择数据 `nullAsValid` | `null 为有效` | `布尔值` | `假` |将空值视为有效数据点 `时区` | `时区` | `字符串` | - |时态数据的时区 ### 格式化回调物业 |类型 |描述 ---|---|--- `dataLabelFormatter` | `函数` |数据标签的自定义格式 `工具提示格式化程序` | `函数` |工具提示的自定义格式 `xAxisLabelFormatter` | `函数` | X 轴标签的自定义格式 `yAxisLabelFormatter` | `函数` | Y 轴标签的自定义格式 `gaugeInnerLabelFormatter` | `函数` |仪表内部标签的自定义格式 `guideTooltipFormatter` | `函数` |指南工具提示的自定义格式 ### 方法方法|返回|描述 ---|---|--- `loadModel()` | `Promise` |加载图表模型 `刷新（道具？）` | `Promise` |刷新图表；可选的“{ updateData，resetAxesBounds }” `resetZoom()` | `Promise` |将缩放重置为默认视图 `clearSelection()` | `Promise` |清除所有选择 `switchSelection()` | `Promise` |切换选择状态 `exportAsImage（格式？）` | `Promise` |将图表导出为“png”、“jpg”或“svg” `exportAsCSV（选项？）` | `Promise` |将图表数据导出为 CSV 文件 `errorAlert（消息？）` | `Promise` |显示错误警报 `通知（消息？，标题？）` | `Promise` |显示通知 `componentOnReady()` | `承诺<此>` |当组件完全加载时解决 ### 活动活动 |详情 |描述 ---|---|--- `arcgisSelectionChange` | - |当图表选择更改时触发 `arcgisDataFetchComplete` | `WebChartDataTypes` |获取数据后触发 `arcgisDataProcessComplete` | - |数据处理完成时触发 `arcgisUpdateComplete` | `验证状态` |图表更新完成时触发 `arcgisConfigChange` | `{ newConfig, oldConfig, functionCalled }` |图表配置更改时触发 `arcgisAxesMinMaxChange` | `AxesMinMaxChangePayload` |计算轴最小/最大时触发 `arcgisBadDataWarningRaise` | `数据警告对象` |检测到数据错误时触发 `arcgisChartNotFoundWarning` | `字符串` |找不到引用的图表时触发 ## 基本用法 ### 来自要素层的图表

<脚本类型=“模块”> const mapElement = document.querySelector("arcgis-map"); const ChartElement = document.querySelector("#my-chart"); 等待mapElement.viewOnReady(); const view = mapElement.view; // 获取图层 const layer = view.map.layers.find(l => l.title === "我的图层"); 等待视图.whenLayerView(层); // 将图层和视图分配给图表 ChartElement.layer = 图层； ChartElement.view = 视图； // 创建条形图模型 const { BarChartModel } = 等待 $arcgis.import( “@arcgis/图表组件/模型” ）； const 模型 = new BarChartModel(); model.layer = 层； ChartElement.model = 模型； ### 带有 WebChart 规范的图表（JSON 配置） const ChartElement = document.querySelector("arcgis-chart"); ChartElement.layer = 图层； ChartElement.view = 视图； // WebChart JSON 规范图表元素.模型 = { 类型：“酒吧”，标题：{visible：true，text：“按州划分的人口”}，系列：[{ 类型：“酒吧”，查询：{ orderByFields: ["人口 DESC"], groupByFieldsForStatistics：[“状态”]，输出统计：[{ 统计类型：“总和”， onStatisticField: "人口", outStatisticFieldName: "TotalPop" }] }, x：“状态”， y：“总流行音乐” }] }; ### 饼图 const { PieChartModel } = 等待 $arcgis.import( “@arcgis/图表组件/模型” ）； const 模型 = new PieChartModel(); model.layer = 层； const ChartElement = document.querySelector("arcgis-chart"); ChartElement.layer = 图层； ChartElement.view = 视图； ChartElement.model = 模型； ### 折线图 const { LineChartModel } = 等待 $arcgis.import( “@arcgis/图表组件/模型” ）； const 模型 = new LineChartModel(); model.layer = 层； const ChartElement = document.querySelector("arcgis-chart"); ChartElement.layer = 图层； ChartElement.view = 视图； ChartElement.model = 模型； ## arcgis-charts-action-bar 组件提供图表交互工具栏（导出、选择、过滤、缩放）。 ### 设置

<脚本类型=“模块”> const Chart = document.querySelector("#my-chart"); const actionBar = document.querySelector("#my-action-bar"); // 将操作栏连接到图表 actionBar.chartElement = 图表； ### 关键操作栏属性物业 |属性 |类型 |默认 |描述 ---|---|---|---|--- `图表元素` | `图表元素` | `ArcgisChart` | - |参考图表组件 `扩展` | `扩展` | `布尔值` | `假` |操作栏是否展开 `exportAsImageState` | `导出为图像状态` | `字符串` | `“已启用”` |图片导出按钮状态 `exportAsCSVState` | `导出为 csv-状态` | `字符串` | `“已启用”` | CSV 导出按钮状态 `按范围状态过滤` `按范围状态过滤` | `字符串` | `“已启用”` |按范围按钮状态过滤 `按选择状态过滤` `按选择状态过滤` | `字符串` | `“已启用”` |按选择按钮状态过滤 `缩放状态` | `缩放状态` | `字符串` | `“已启用”` |变焦按钮状态 `forceDisableActions` | `强制禁用操作` | `布尔值` | `假` |立即禁用所有操作 `隐藏操作` | - | `DefaultChartActions[]` | - |要隐藏的操作数组操作状态可以是“启用”、“禁用”或“隐藏”。 ## 选择和过滤 ### 在图表和地图之间同步选择 const Chart = document.querySelector("arcgis-chart"); 图表.syncSelection = true; 图表.图层 = 图层; 图表.视图 = 视图; // 监听选择的变化 Chart.addEventListener("arcgisSelectionChange", () => { console.log("选择已更改：", Chart.selectionData); }); ### 按地图范围过滤图表 const Chart = document.querySelector("arcgis-chart"); 图表.filterByExtent = true; 图表.视图 = 视图; 图表.图层 = 图层; ### 运行时数据过滤器 const Chart = document.querySelector("arcgis-chart"); Chart.runtimeDataFilters = { 其中：“人口> 100000”， orderByFields: ["人口 DESC"] }; ＃＃出口 ### 导出为图像 const Chart = document.querySelector("arcgis-chart"); 等待图表.exportAsImage(“png”); //“png”、“jpg”或“svg” ### 导出为 CSV const Chart = document.querySelector("arcgis-chart"); 等待图表.exportAsCSV(); ## 自定义格式化程序 ### 数据标签格式化程序 const Chart = document.querySelector("arcgis-chart"); Chart.dataLabelFormatter = (值, 字段) => { if (typeof value === "number") { return value.toLocaleString("en-US", { style: "currency",currency: "USD" }); } 返回字符串（值）； }; ### 工具提示格式化程序 Chart.tooltipFormatter = (tooltipData) => { 返回 `${tooltipData.category}: ${tooltipData.value.toLocaleString()}`; }; ### 轴标签格式化程序 Chart.xAxisLabelFormatter = (值) => { // 截断长标签返回字符串（值）.length > 15 ？ String(值).slice(0, 12) + "..." : String(值); }; ## CDN 完整示例 <头> <元字符集=“utf-8”/> 要素图层的图表 <脚本src =“https://js.arcgis.com/5.0/”> <风格> html, 正文 { 高度: 100%;保证金：0；显示：柔性； } arcgis-地图 { flex: 1; } #chart-panel { 宽度：400px;高度：100%； } <正文>

<脚本类型=“模块”> const mapElement = document.querySelector("#map"); const ChartElement = document.querySelector("#chart"); const actionBar = document.querySelector("#action-bar"); 等待mapElement.viewOnReady(); const view = mapElement.view; const 图层 = view.map.layers.getItemAt(0); 等待视图.whenLayerView(层); const { BarChartModel } = 等待 $arcgis.import( “@arcgis/图表组件/模型” ）； const 模型 = new BarChartModel(); model.layer = 层； ChartElement.layer = 图层； ChartElement.view = 视图； ChartElement.model = 模型； ChartElement.syncSelection = true; actionBar.chartElement = ChartElement; ## 常见陷阱 1. **缺少`layer`属性**：图表需要图层数据源。仅设置“model”而不设置“layer”会生成空图表。 // 反模式：没有层的模型 ChartElement.model = new BarChartModel(); // 正确：同时设置图层和模型 const 模型 = new BarChartModel(); model.layer = 层； ChartElement.layer = 图层； ChartElement.model = 模型； **影响：** 图表呈现其框架和轴，但不显示任何数据。 2. **图表组件未加载**：图表包必须通过 CDN 显式加载或导入。 <脚本src =“https://js.arcgis.com/5.0/”>

<脚本src =“https://js.arcgis.com/5.0/”> **影响：** `arcgis-chart` 元素未定义并呈现为空内联元素。 3. **将`model`设置为HTML属性**：`model`属性接受复杂对象，并且必须通过JavaScript设置，而不是作为HTML属性。 **影响：** 属性值被忽略；图表显示没有数据。 4. **使用`filterByExtent`而不使用`view`**：范围过滤需要`view`属性来跟踪当前地图范围。 // 反模式：filterByExtent 没有视图图表.filterByExtent = true; 图表.图层 = 图层; // 正确：设置视图进行范围过滤图表.filterByExtent = true; 图表.图层 = 图层; 图表.视图 = 视图; **影响：** 过滤器没有范围可引用，可能会抛出错误或显示所有数据。 5. **操作栏未连接**：操作栏需要对图表元素的引用。 // 反模式：没有图表参考的操作栏 const actionBar = document.querySelector("arcgis-charts-action-bar"); // 缺少：actionBar.chartElement = ChartElement; **影响：** 操作栏按钮可见，但单击时不执行任何操作。 ## 参考示例 * `arcade-execute-chart` \- 执行 Arcade 表达式并根据结果构建图表 * `featurereduction-cluster-popup-chart` \- 集群弹出窗口内的图表 * `featurereduction-cluster-pie-charts` \- 饼图集群表示 * `visualization-pie-chart` \- 饼图可视化 ## 相关技能 * 请参阅“arcgis-layers”以配置提供图表数据的要素图层。 * 请参阅 `arcgis-core-maps` 设置图表引用的 MapView。 * 有关用于图表数据计算的 Arcade 表达式，请参阅“arcgis-arcade”。 * 有关托管图表面板的布局组件，请参阅“arcgis-widgets-ui”。

Arcgis 图表

包含技能