Gio.js拥有丰富的API，您可以使用这些API来构建和定制3D数据可视化模型。了解如何配置参数会对之后的开发有很大的帮助。 Gio.js有两种基本的配置参数方式：通过构造函数配置和通过API配置。点击以下文档链接了解详细信息：
当创建Gio controller对象时，可以将配置参数传递给controller，具体传递方式如下所示：
var configs = {
color: {
surface: 0xFF0000
}
};
var globe = new Gio.controller(container, configs);或者可以在controller创建之后，使用configure API来配置controller，具体使用方式如下所示：
controller.configure(configs)configure API接受的参数和通过构造函数配置一样，可以查看 配置参数表 了解各个配置参数的详细解释。
var configs = {
control: {
stats: false,
disableUnmentioned: false,
lightenMentioned: false,
inOnly: false,
outOnly: false,
initCountry: "CN",
halo: true
},
color: {
surface: 0xFFFFFF,
selected: null,
in: 0x154492,
out: 0xDD380C,
halo: 0xFFFFFF,
background: null
},
brightness: {
ocean: 0.5,
mentioned: 0.5,
related: 0.5
},
resource: {
loading: null
}
}参数表:
| 参数名 | 默认值/范围 | 描述 |
|---|---|---|
| control.stats | false | True表示开启性能监控 |
| control.disableUnmentioned | false | True表示设置"未提到的国家"不可点击 |
| control.lightenMentioned | false | True表示设置地球表面"提到的国家"比"未提到的国家"更亮 |
| control.inOnly | false | True表示只显示"输入线条" |
| control.outOnly | false | True表示只显示"输出线条" |
| control.initCountry | "CN" | 初始"被选中国家" |
| control.halo | true | True表示显示光晕 |
| color.surface | 0xFFFFFF or "#FFFFFF" | 大陆以及海洋颜色 |
| color.selected | null | 被选中国家颜色 |
| color.in | 0x154492 or "#154492" | "输入线条"颜色 |
| color.out | 0xDD380C or "#DD380C" | "输出线条"颜色 |
| color.halo | 0xFFFFFF or "#FFFFFF" | 光晕颜色 |
| color.background | null | 背景颜色 |
| brightness.ocean | 0.5 [0.0, 1.0] |
海洋亮度 |
| brightness.mentioned | 0.5 [0.0, 1.0] |
被提到国家亮度 |
| brightness.related | 0.5 [0.0, 1.0] |
有关国家亮度 |
| resource.loading | null | loading图片相对路径 |
功能设计型API是一组可以控制Gio元素（呈现或隐藏）的API。除文档外，我们还提供在线演示来帮助您更好地理解这些API。 点击以下链接来查看各个API详细的解释。
设置初始 被选中国家 。当Gio地球完成初始化之后，地球会有一个转动动画，将初始国家转至屏幕正前方。 默认设置下初始国家是"CN"（中国）。
// 将初始国家改成"美国"
controller.setInitCountry("US");
使Gio地球表面上 提及国家 比 未提及的国家 更亮。 在默认情况下，提及国家和未提及国家的亮度是一样的。
controller.lightenMentioned(true);
controller.lightenMentioned(false);
禁止点击 未提及的国家 ，这个操作会使在数据集中未提到过的国家在3D地球上不可选。默认设置下此功能不开启。
controller.disableUnmentioned(true);
controller.disableUnmentioned(false) controller.showInOnly(true);
controller.showInOnly(false);
controller.showOutOnly(true);
controller.showOutOnly(false);
添加/删除光晕是一组API，可以控制是否在3D地球周围显示 光晕 。 当使用 addHalo() API添加光晕时，可以指定光晕颜色。默认设置下光晕是启用的。
controller.addHalo(0xFF0000);
controller.removeHalo();
显示或隐藏左上角的 性能监控 组件。在使用这个API之前，需要先在HTML页面的 <header> 部分引入stats.min.js
<header>
<script src="stats.min.js"></script>
</header> controller.enableStats();
controller.disableStats();
颜色风格类API用于设置Gio地球的风格（颜色和亮度）。您可以自定义几乎所有Gio地球的参数，例如 表面， 国家， 连接线， 光晕， 背景， 海洋 等等。 我们同时在文档中提供在线演示和codepen在线编辑器用于帮助您理解和测试每一个API。 您可以点击以下链接来了解每一个API的定义和使用详情。
通过设置风格名称来更改3D地球的颜色风格。Gio.js提供一些预设的色彩风格，查看 预置样式 文档，了解更多样式。
controller.setStyle("magic");
通过RGB值设置3D地球的 表面 颜色。默认颜色是 #FFFFFF：
// 颜色的参数可以是字符串 "#FF0000" 或者是十六进制数值 0xFF0000
controller.setSurfaceColor("#FF0000");
//controller.setSurfaceColor(0xFF0000);
通过RGB值设置 选中国家 颜色。默认的选中国家颜色和表面颜色相同，但亮度稍高。
// 颜色的参数可以是字符串 "#FF0000" 或者是十六进制数值 0xFF0000
controller.setSelectedColor("#FF0000");
//controller.setSelectedColor(0xFF0000);
通过RGB值设置输出线的颜色。关于连接线定义，请参考这里: 连接线。
// 颜色的参数可以是字符串 "#FEF504" 或者是十六进制数值 0xFEF504
controller.setExportColor("#FEF504");
//controller.setExportColor(0xFEF504);
通过RGB值设置输入线的颜色。关于连接线定义，请参考这里: 连接线。
默认的输入线颜色是 0x154492：
// 颜色的参数可以是字符串 "#00FF00" 或者是十六进制数值 0x00FF00
controller.setImportColor("#00FF00");
//controller.setImportColor(0x00FF00);
通过RGB值设置 光晕 的颜色。
光晕的默认颜色是 0xFFFFFF:
// 颜色的参数可以是字符串 "#FF0000" 或者是十六进制数值 0xFF0000
controller.setHaloColor("#FF0000");
//controller.setHaloColor(0xFF0000);
通过RGB值设置 背景 的颜色
默认的颜色是 0x000000:
// 颜色的参数可以是字符串 "#530000" 或者是十六进制数值 0x530000
controller.setBackgroundColor("#530000");
//controller.setBackgroundColor(0x530000);
可以设置 海洋 的亮度。
亮度的数值范围是 [0, 1] ，默认的亮度数值是0.5：
controller.adjustOceanBrightness(0.8);
可以设置 相关国家 的亮度。
亮度的数值范围是 [0, 1] ，默认的亮度数值是0.5：
controller.adjustRelatedBrightness(0.8);
可以设置 被提到国家 的亮度。
默认设置中，被提到国家并不会被高亮。要更改被提到国家的亮度，首先需要按如下方法启用该功能lightenMentioned(true)：
controller.lightenMentioned(true);
controller.adjustMentionedBrightness(0.8);
Gio.js拥有多种设置数据的方式。最基本的方式是使用 addData API。如果需要异步加载数据，可以使用 addDataAsync API；如果需要周期性加载数据，可以使用 liveLoad API。 为了让数据更具有观赏性，Gio.js会对数据进行预处理。在添加数据时，你可以同时设置数据展示时的颜色。
将数据加载到Gio的控制器并同步覆盖以前的数据。用于可视化的数据集采用JSON格式。数组中的每一个元素都包含一个输入国家(i)，一个输出国家(e)和一个数值(v)。
参数：
data -- JSON格式数据
[
{
"e": "CN",
"i": "US",
"v": 3300000
},
{
"e": "CN",
"i": "RU",
"v": 10000
}
]说明：连接线连接两个国家并具有方向性，运动粒子将在该方向上生成动画，连线方向由“e” -> “i”定义。“e”和“i”分别表示两个国家， “e”表示连线输出的国家，“i”表示连线输入的国家。“v”表示这两个国家之间的数值，如果数值较小，则粒子的大小和数量会比较小， 并且在连线上的移动速度相对缓慢；如果数值较大，则粒子的大小和数量会比较大，并且在连线上的移动速度相对较快。
参数：
url - 返回JSON格式数据，数据格式与添加（更新）数据 定义的data相同
asyncLoadCallback - 当加载完成时执行的回调函数
从一个数据源异步加载数据。
用法：
var url = "sampleData.json";
// 使用addDataAsync() API异步加载URL中的数据。
// 回调将在完成数据加载后执行。
controller.addDataAsync( url, asyncLoadCallback );
function asyncLoadCallback () {
controller.init();
}参数：
url - 返回JSON格式数据，数据格式与添加（更新）数据 定义的data相同
liveLoadCallback - 当加载完成时执行的回调函数
duration - 周期性数据加载时间（以毫秒为单位）
周期性地从一个数据源加载数据，用法：
var url = "dynamicallyAPI/data";
// 使用liveLoad() API加载URL中的数据。
// 设置回调。
// 指定加载时间。
controller.liveLoad( url, liveLoadCallback, 50000 );
function liveLoadCallback () {
console.log("Load data event happens.");
}正如 连接线 章节所述，连接线分为两种类型：输入线和输出线。 与这两种类型的连接线相对应的颜色称为输入颜色和输出颜色。通过指定输入数据内容可以为这条数据指定一个唯一的颜色，如下所示：
[
{
"e": "CN",
"i": "US",
"v": 100000,
"inColor": "#0000FF",
"outColor": "#00FF00"
},
{
"e": "CN",
"i": "RU",
"v": 3000000,
"inColor": "#EE0E00",
"outColor": "#FFFF00"
}
]备注：e，i，v与 添加数据 中的定义相同。
在输入的JSON数据中，v的值越高，粒子越亮，并且它们从出发国家到目的国家的运行越快。 （请查阅Michael Chang的 文章 来了解他是如何提出这个想法的）。Gio.js库会自动缩放输入数据的范围以便于更好的数据可视化。作为开发人员，您还可以定义自己的预处理数据的方式。
目前Gio只有一个回调函数。不过我们正在努力开发更多的回调函数，希望可以使用这些回调函数来开发更具有交互性的应用。
当被选中的国家改变时被触发。
会向回调函数传递两个参数：被选中的国家和相关国家列表。被选中的国家指的是一个CountryObject对象，这个对象表示新的被选中的国家；相关国家列表是CountryObject对象的列表，这个列表中储存了所有与新的被选中国家相关的国家。
使用方法：
// 使用onCountryPicked() API来设置回调函数
controller.onCountryPicked( callback );
// 定义一个回调函数，这个函数作为一个例子，简单地在console里输出selectedCountry和relatedCountries这两个参数
function callback ( selectedCountry, relatedCountries ) {
console.log(selectedCountry);
console.log(relatedCountries);
}
CountryObject对象是一个JSON对象，具体定义如下所示（属性的值会随着不同的对象而改变）：
{
ISOCode: "AU"
center: THREE.vector
lat: -27
lon: 133
name: "AUSTRALIA"
}
参数表：
| 参数 | 描述 |
|---|---|
| ISOCode | 国家的ISO代码 |
| center | 国家的中心，用THREE.vector对象来表示 |
| lat | 国家的纬度 |
| lon | 国家的经度 |
| name | 国家的名称 |
使用Gio高级功能，可以更容易地开发更具有交互性的应用。
方法链是Javascript中常用的编程模式，Giojs也支持使用方法链对参数进行配置。使用方法链，参数的设置会更加清晰可读。 以下的例子展示了如何使用Giojs方法链。（你也可以点击在线演示，然后查看例子的源码来详细了解方法链是如何应用在实际场景中的）
不使用方法链的API调用:
controller.setSurfaceColor( "#00FF00" );
controller.setSelectedColor( "#FF0000" );
controller.disableUnmentioned( true );使用方法链的API调用:
controller.setSurfaceColor( "#00FF00" )
.setSelectedColor( "#FF0000" )
.disableUnmentioned( true );除了通过用户点击地球表面的国家来进行切换以外，Giojs还支持使用 switchCountry() API来直接切换 被选中的国家 ，开发者可以使用这个API来开发具有交互性的应用。 （您也可以点击在线演示，查看应用该API的示例）
参数：countryCode - 在 ISO 3166 标准中的国家代码
Instead of mouse click, swtichCountry() API can be used to change currently selected country. This gives developer more flexibility.
// 切换选中国家到 "US"
controller.switchCountry("US");
