ChartIQ SDK Documentation

入门指南

开始之前，以下这些信息将帮助您了解 ChartIQ Library 的最佳使用方式及库的工作原理。

Library 注重高度交互的图表。

交互式图表是指终端用户可以快速轻松地移动和缩放的图表。终端用户可以添加内容（研究、比较符号等）。用户可以在多个符号之间快速转换，更改图表类型、范围、间隔等。库 API、数据模型、布局都是基于这个基本要求。这可能与其他主要注重静态图表的图表工具不同。

Library 的重心是市场数据制图 (亦称“股价图”)。

API 设计中的诸多选择和交互默认设置偏向于交易者。特别是对图表进行了技术分析方面的优化（将图表用于证券交易）。例如，数据模型假定了开盘、高、低和收盘值。其他图表工具通常注重通用的“时间序列”制图（如绘制过去一个世纪的温度图表）。 ChartIQ 可用于通用的时间序列制图（如分析学），但是 API 意在使股价制图最简单化。

您提供库的主机以及（市场）数据。

您将收到包含库 (chartiq.js)、UI模板、示例和支持文件的 ChartIQ Library 压缩文件。您在自己的服务器上保存库，作为应用程序的一部分。您必须提供一个数据源。通常为“市场数据服务器”。

建议高度交互的股价图采用“基于事件的”数据模型。

高度交互的图表需获取数据来响应用户活动 - 添加比较，改变符号、间隔、分页、流式处理。管理图表的“状态”可能一下子变得很难，因此我们设计了库来管理它的状态。图表会向您索要它需要的数据（您编写一个“quotefeed”的代码来做到这一点），而非向图表馈送数据。这与大多数图表工具极为不同。初期需要理解并付出一些努力，但可以节省大量工作。

ChartIQ 将“图表”与控制图表的“UI”区分开来。

图表库在标签内创建一个表。图表可以通过用户界面（菜单、对话框、符号条目）控制，也可以通过 API（调用函数）控制。用户界面是可选的。这有别于许多其他采用硬编码的用户界面的股价图表工具（在应用内可能看起来很糟糕！）

有三 (3) 种 UI 方法。为您的应用程序选择正确的起点！

注意：所有方法使用的数据模型相同。区别在于以下决定：(1) 您想让自己的应用以何种外观呈现，和 (2) 您希望如何构建应用。

1) 剪切和粘贴模板

ChartIQ Library（zip 文件）包含两种模板： sample-template-basic.html 和 sample-template- advanced.html。这些模板都采用 W3 WebComponents 进行构建。

sample-template-advanced.html 是一个功能齐全的图表和用户界面。如果不想自己构建用户界面，可使用 template- advanced.html。将代码剪切并粘贴到您的应用当中。然后用 CSS 自定义外观和感觉。删除不想要的所有 html。
sample-template-basic.html 是一个精简示例。用户更容易理解 ChartIQ 如何在这个简单的示例中使用 Web 组件。

2)克隆 ChartIQ“种子项目” 如果在 Angular、React、Vue 或 iOS 中编程，您可能希望从 ChartIQ 种子项目开始。这些都是您可以科隆或叉的公共 GitHub 存储库。每个项目都包含了示例，演示对于框架的 ChartIQ 的建议方法。我们还针对所有复杂内容构建了组件！

注意：Android、Java、.Net？皆涵盖在内！查看 Webviews 和 Containers（教程 - Webviews and Containers.html）。

js / nativeSdkBridge.js：将简单的函数封装到我们的库中，所以任何非本地的JavaScript语言都可以轻松地使用它，而不必用基于字符串的查询来“混淆”你的代码。
js nativeSdkAccessibility.js：一个用于nativeSdkBridge.js的插件，可以帮助您嵌入Android和iOS中的语音辅助功能模式，并允许引用自定义的公告。
sample-template-native-sdk.html：与“sample-template-basic.html”几乎相同，但使用可由非本地JavaScript界面使用的自定义引号。

3)使用 RAW API

有了代码，您就可以随意控制图表。轻松改造现有的 UI 来使用 ChartIQ，或从头开始构建自己的 UI。如果应用程序很复杂（如应用同时显示多个交互式图表），这也许是最好的方式。

helloworld.html 展示了如何以几行代码创建一个表。

查看 Implementing UI教程了解更多信息。

必备要素

ChartIQ 的文档包括一个完整的 API 参考和许多教程。我们还有一个巨大的 jsfiddles 集合。在您开始着手之前，下面列出了帮助您入门的一些基本情况和建议：

js\chartiq.js 是核心库。您可以用一个脚本标记包含此内容或使用 AMD (require.js)
css\stx-chart.css 是库所必需的。图表库使用该文件中的 css 来确定图表的颜色和样式（烛状图颜色、线条颜色、交叉线样式等等）。您应当将该内容纳入应用程序中。建议不更改此 css 文件。如果您想更改图表样式，只需用自己的 css 覆盖此 css 样式。
CIQ 是 ChartIQ 命名空间。
CIQ.CartEngine 将用来创建图表。
您必<div>须为图表提供一个。我们称之为 “容器 (container)”。图表将自动填满容器。
stxx 是我们在图实例中使用的变量名。在我们的教程和代码示例中随处可见！
图表引擎将创建一些 html 元素（画布、交叉线、缩放按钮、图标等），并将其添加到您提
供的内容中。您可以用 css 来控制这些。容器必须有 position:relative 或 position:relative，否则这些元素不会正确显示。
stxx.loadChart("IBM") 给出了如何以编程的方式改变图表符号。一般来说，您的“quotefeed”将获取数据。CIQ.ChartEngine#loadChart
$$$ 是的快捷方式 document.querySelector包含在库内。您当然可以使用 jquery，但请务必返回实际元素 $(/*selector*/)[0]。

以下给出了基本示例：

<link rel="stylesheet" type="text/css" href="css/stx-chart.css">
<div id="myContainer" style="position:relative;width:600px;height:480px;">
<script src="chartiq.js"></script>
<script>
var stxx=new CIQ.ChartEngine(document.querySelector("#myContainer"));
stxx.attachQuoteFeed(quoteFeedSimulator);
stxx.loadChart("IBM");
</script>

术语表

在通篇文档中，我们采用了制图有关的术语。您在阅读整篇文档时如果遇到新词汇，可参考本术语表。

OHLC - 开盘、高、低和收盘是股价图上显示的典型值。
bar, tick, candle, data point - 图表上的水平位置。每“柱”表示一个时间段内的活动，我们称之为“周期性” (periodicity)。
interval - 您的数据服务器发送的每“柱”所代表的时间范围（如“1分钟柱”、“5分钟柱”、“日柱”）
periodicity - 图上每柱/烛/数据点所代表的时间范围。一般来说与间隔相同，但是柱可以“加总”。例如，图可以根据每日数据显示“每月”柱状图。
range - 整个图表上的可见日期范围。例如，从 1 月 1 日到 1 月 31 日。
span - 整个图表上显示的时间量。例如，一张图显示 1 月 1 日到 1 月 31 日的“一个月”跨度。
symbol - 该字符串代表股票代码。其传递到 stxx.loadChart()。大多数公司都有自己的“股票代码”。股票代码通常为不同信息的组合，例如“AAPL.LSE”可能表示 Apple 在伦敦证券交易所（London Stock Exchange，英文缩写 LSE）上市交易。另一家公司可能采用“AAPL LON”为股票代码。如果需要一个以上字段，您可以使用，而非代码。参阅：symbolObject。
data server - 市场数据的来源。例如，一个通过网络连接提供 OHLC 柱状图数组的远程服务器（例如 Ajax 或 WebSocket）。
quotefeed - 开发人员将您的服务器数据整合到图表引擎时，您构建的对象。请参阅下方步骤。
masterData - 图表中的 OHLC 数据数组。
series - 添加到 masterData 的其他数据，如比较符号
study 或 indicator - 应用于 masterData 的公式，为图表带来额外视觉效果。可以是叠加到图表上，或者在图表下方的单独面板中显示的。
dataSet - masterData 数组的副本，已经对研究公式和系列的结果予以补充。
dataSegment - 屏幕上显示的 dataSet 部分。用户查看图表时可以移动。
streaming - 随着时间的推移，在图表末尾添加更多数据。
pagination - 随着用户不断往后滑动，将数据前置到图表开始。
callbacks - 发生某些事件时图表可以调用的函数（如点击、移动、新股票代码）
injections - 您可以编写的自定义代码，通过或方法用来修改库行为。
drawings - 用户在图表上绘制的图图，如线、注释（文本）或斐波那契。
markers - 可以被附加到图表上的 DOM 元素，随着用户查看图表而移动。
tfc - Trade From Chart 插件（模块），可以启用“视觉化交易”。

后续步骤

连接您的数据 - 第一步是将您的市场数据集成到图表库。首先阅读“数据与图表集成”（教程- DataIntegrationOverview.html)。
浏览 JSFiddle 示例 - 我们提供了 JSFiddle 示例代码，供用户尝试。剪切和粘贴到您自己的代码！
教程 - 深入阅读教程 (Tutorials)，阐明了如何使用 API 的各个部分。