@esri/雪松

ArcGIS 的 JavaScript 图表

Cedar是一个用于设计和共享数据可视化的库:

• 由来自ArcGIS的数据提供动力 地图,场景, 财务报告和审定财务报表 服务
• 包括智能默认可视化选择
• 满足特定需求

见下文如何 开始,理解雪松饼 核心概念,或见 演示 雪松在行动.

您正在查看雪松花v1.x的文档。 你也可以看到 雪松v.x的文档。 。 。 .

开始

正在安装 Cedar

注: 如果您想在 Ember.js 应用程序中使用雪松,请参见 木质- cli- 雪松 换句话说.

你可以安装雪松及其 依赖关系 以 npm 为单位 :

npm install --save @esri/arcgis-rest-feature-layer@^2.0.0 @esri/arcgis-rest-request@^2.0.0 amcharts3 @esri/cedar 

线条 :

yarn add @esri/arcgis-rest-feature-layer@^2.0.0 @esri/arcgis-rest-request@^2.0.0 amcharts3 @esri/cedar

或者,你可以从 unpkg.com (英语) CDN 作为 如下所示。 。 。 .

正在导入 Cedar

如果你在现代的网络应用中 使用锡达的话 网络软件包,你可以加载 Cedar 及其 依赖关系 使用 import 发言.

// import the amCharts base library
import "amcharts3/amcharts/amcharts";
// in this case, we only need bar charts, so we'll import the appropriate amCharts module
import "amcharts3/amcharts/serial";
// optionally import an amcharts theme; cedar provides a calcite theme
import "@esri/cedar/dist/umd/themes/amCharts/calcite.js";
// import the cedar Chart class
import { Chart } from "@esri/cedar"

如果您需要使用其他图表类型, 或者想要使用安图插件, 请导入相应的安图模块 导入雪松之前数字 :

// for pie charts
import "amcharts3/amcharts/pie";
// for scatter and bubble charts
import "amcharts3/amcharts/xy";
// for radar charts
import "amcharts3/amcharts/radar";

见 图表文档 用于获取关于导入安图模块的更多信息.

使用锡达

一旦加载到雪松,您可以在指定的元素中创建并显示图表。 首先创建元素 :

<div id="chart" style="height: 400px;"></div>

然后添加一个将配置雪松并渲染图表的脚本:

// connect to the data
var datasets = [{
  "url": "https://services.arcgis.com/uDTUpUPbk8X8mXwl/arcgis/rest/services/Public_Schools_in_Onondaga_County/FeatureServer/0",
  "name": "schools",
  "query": {
    "orderByFields": "Number_of_SUM DESC",
    "groupByFieldsForStatistics": "Type",
    "outStatistics": [{
      "statisticType": "sum",
      "onStatisticField": "Number_of",
      "outStatisticFieldName": "Number_of_SUM"
    }]
  }
}];

// designate a one or more series to show the data on the chart
var series = [{
  "category": {"field": "Type", "label": "Type"},
  "value": {"field": "Number_of_SUM", "label": "Number of Students"},
  "source": "schools"
}];

// optionally override any of the cart type's default styles
var overrides = {
  "categoryAxis": {
    "labelRotation": -45
  }
}

//create a cedar chart using the known 'bar' type
var elementId = 'chart';
// NOTE: the following line assumes you've imported Chart like:
// import { Chart } from "@esri/cedar";
// if you've loaded the Cedar using script tags
// and are using the cedar global instead
// you should replace this line with:
// var chart = new cedar.Chart(elementId, {"type": "bar"}) 
var chart = new Chart(elementId, {"type": "bar"})
  .datasets(datasets)
  .series(series)
  .overrides(overrides);

// render the chart
chart.show();

见 API 文档 关于如何使用雪松图的进一步详情.

见 演示文稿 cedar与其他库合作的例子,例如用于JavaScript或React的ArcGIS API.

配置 Cedar

您可以配置雪松以使用自定义执行 fetch() 设置 cedar.config.fetch = myCustomFetch。 。 。 .

概念

雪松图的组成部分

平面图由 定义,包括:

• 数组 数据集,每个有 无论是数字 :
  • (单位:千美元) url 到ArcGIS 特征层,并附带可选 查询参数
  • 或者说 内入 data,这可以是 特性集,或数组 特性 或者说 战俘编号
• 数组 系列 将数据绑入图表上的地块(栏、行、点等)
• 财务报告和审定财务报表 overrides 对图表类型默认样式的具体修改

图表类型

锡达目前提供一套常用图表类型,包括: 栏, (中文(简体) ), 线条, (中文(简体) ), 区域, (中文(简体) ), 散开, (中文(简体) ), 发泡, (中文(简体) ), 馅饼,以及 雷达。在未来,开发者将有可能创建自定义图表类型,供拥有自己数据源的其他开发者使用.

发言

地图外的图表和自定义可视化

2018 Dev 首脑会议幻灯片

2017 Dev首脑会议的视频

演示文稿

见 此代码笔 尝试创建类似上面的简单条形图.

那你们可以了 查看并修改不同类型图表的定义。 。 。 .

你可以看到如何使用雪松与 用于 JavaScript 的 ArcGIS API 在这些例子中:

• 汇总地图数据的图表
• 使用图层特性作为内置数据的图表
• 使用 cedar w/ 客户端侧图层查看查询

见 此代码对话框 以例说明如何在反应中使用Cedar.

正在装入 Cedar

改为 安装 财务报告和审定财务报表 导入 锡达,你可以装上锡达和它 依赖关系 包括指向 CDN(或本地安装的这些库版本)的脚本标记。 这会使 cedar 您的应用程序可访问全球.

从CDN

<!-- load the amCharts base library -->
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<!-- in this case, we only need bar charts, so we'll load the appropriate amCharts script -->
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<!-- load the arcgis-rest-js scripts -->
<script src="https://unpkg.com/@esri/arcgis-rest-request"></script>
<script src="https://unpkg.com/@esri/arcgis-rest-feature-layer"></script>
<!-- optionally load an amcharts theme; cedar provides a calcite theme -->
<script src="https://unpkg.com/@esri/cedar/dist/umd/themes/amCharts/calcite.js"></script>
<!-- load cedar -->
<script src="https://unpkg.com/@esri/cedar/dist/umd/cedar.js"></script>

如果您需要使用其他图表类型, 或者想要使用安图插件, 请在装入雪松之前加载相应的安图脚本 :

<!-- for pie charts -->
<script src="https://www.amcharts.com/lib/3/pie.js"></script>
<!-- for scatter and bubble charts -->
<script src="https://www.amcharts.com/lib/3/xy.js"></script>
<!-- for radar charts -->
<script src="https://www.amcharts.com/lib/3/radar.js"></script>
<!-- optioinally load the amcharts plugin to export the chart as and image or table -->
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />

依赖关系

锡达还不是另一个JavaScript图表库. 相反地,雪松是一个非常薄的包装器,围绕其他进行举重的图书馆. 锡达用途 图表 库作为其绘图引擎。 锡达也使用 @esri/arcgis-resst-fetature-layer (中文(简体) ) 财务报告和审定财务报表 @esri/arcgis-rest-请求 以查询特性数据。 你将需要 安装 这些图书馆以及您的应用程序中的雪松。 如果你正在从CDN装入雪松,请参考 装入雪松 上节 <script> 需要包含的标签.

锡达支持 与 ArcGIS Online 相同的浏览器然而,您可能需要包括用于 fetch 财务报告和审定财务报表 Promise,如果您的应用程序必须支持不支持它们的布鲁斯(即IE或更老版本的Safari/Android).

版本

为了在发行周期中保持透明度并努力保持后向相容性,Cedar在语义版准则下得到了维护并尽可能地遵守这些规则.

版本的编号将采用以下格式:

<major>.<minor>.<patch>

并按下列准则构建:

• 打破后向兼容性 冲击主 重置小和补丁时
• 在不突破后向兼容的情况下新建添加 撞倒未成年人 重置补丁时
• 错误修正和错误更改 只碰接补丁

关于SemVer的更多信息,请访问 http://semver.org/ (中文(简体) )。 。 。 .

发展指示

此寄存器是一个使用 纱线工作空间 财务报告和审定财务报表 莱娜

1. 将此寄存器和克隆“ cedar” 本地化
2. cd 输入 cedar 文件夹
3. 安装依赖关系并初始化单列波 yarn
4. 在 root 文件夹中启动网络服务器并访问 /docs
5. 当源代码更新时, 运行 yarn start

测试

要运行测试一次 所有的包,运行 yarn test 从单发根.

要运行测试任何软件包 当你更新其源代码, cd 进入软件包并运行 yarn run test:watch 在你做出改变时 继续运行软件包的测试.

许可证发放

版权:© 2014-2018 Esri

根据Apache许可证第2.0版("License"); 您不得使用此文件,除非符合许可证. 您可在下列地点获得许可证副本:

http://www.apache.org/licenses/LICENSE-2.0 (中文(简体) )

除非适用的法律要求或书面同意,否则软件 根据许可证发放的是在“AS IS”BASIS上发放的, 没有任何明示或暗示的警告或条件. 有关许可的特定语言的许可证 许可证的限制.

许可证副本可到存放处索取 自由主义 文档.