分类
套期保值

图表分析法(Charts)

  • js\chartiq.js 是核心库。您可以用一个脚本标记包含此内容或使用 AMD (require.js)
  • css\stx-chart.css 是库所必需的。图表库使用该文件中的 css 来确定图表的颜色和样式(烛状图颜色、线条颜色、交叉线 图表分析法(Charts) 样式等等)。您应当将该内容纳入应用程序中。建议不更改此 css 文件。如果您想更改图表样式,只需用自己的 css 覆盖此 css 样式。
  • CIQ 是 ChartIQ 命名空间。
  • CIQ.CartEngine 将用来创建图表。
  • 您必 须为图表提供一个。我们称之为 “容器 (container)”。图表将自动填满容器。
  • stxx 是我们在图实例中使用的变量名。在我们的教程和代码示例中随处可见!
  • 图表引擎将创建一些 html 元素(画布、交叉线、缩放按钮、图标等),并将其添加到您提

图表分析法(Charts)

开始之前,以下这些信息将帮助您了解 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 存储库。每个项目都包含了示例,演示对于框架的 图表分析法(Charts) 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。如果应用程序很复杂(如应用同时显示多个交互式图表),这也许是最好的方式。

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

  • js\chartiq.js 是核心库。您可以用一个脚本标记包含此内容或使用 AMD (require.js)
  • css\stx-chart.css 是库所必需的。图表库使用该文件中的 css 来确定图表的颜色和样式(烛状图颜色、线条颜色、交叉线 样式等等)。您应当将该内容纳入应用程序中。建议不更改此 css 文件。如果您想更改图表样式,只需用自己的 css 覆盖此 css 样式。
  • CIQ 是 ChartIQ 命名空间。
  • CIQ.CartEngine 将用来创建图表。
  • 您必 须为图表提供一个。我们称之为 “容器 (container)”。图表将自动填满容器。
  • stxx 是我们在图实例中使用的变量名。在我们的教程和代码示例中随处可见!
  • 图表引擎将创建一些 html 元素(画布、交叉线、缩放按钮、图标等),并将其添加到您提

  • OHLC - 开盘、高、低和收盘是股价图上显示的典型值。
  • bar , tick , candle , data point - 图表上的水平位置。每“柱”表示一个时间段内的活动,我们称之为“周期性” (periodicity)。
  • interval - 您的数据服务器发送的每“柱”所代表的时间范围(如“1分钟柱”、“5分钟柱”、“日柱”)
  • periodicity - 图表分析法(Charts) 图上每柱/烛/数据点所代表的时间范围。一般来说与间隔相同,但是柱可以“加总”。例如,图可以根据每日数据显示“每月”柱状图。
  • 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 示例代码,供用户尝试。剪切和粘贴到您自己的代码!

图形和图表

Acquire the right knowledge for presenting your brilliant ideas or findings with 200+ eye-catching visual models at your own choice, No overwhelming pile of information! The best alternative for Visio.

Access to this page has been denied.

You have been blocked because we believe you are using automation tools to browse the website.

This may happen as a result of the following:图表分析法(Charts)

  • Javascript is disabled or blocked by an extension (ad blockers for example)
  • Your browser does not support cookies

If you think you have been blocked by mistake, please contact [email protected] with the reference ID below.

使用MongoDB图表对数据进行可视化

我们的MongoDB 图表服务器运行在localhost:80上,我们可以登录到Data Sources选项卡。我们使用Atlas (mongodb+srv://airbnbdemo:[email protected]/test?retryWrites=true)中的URI并选择Connect。接下来,我们被问到希望从集群中使用哪个数据源,在本例中,我将选择airbnb数据库中的seattlelistingandviews。对于权限,我只想保持所有内容都是私有的,因此我将接受缺省值并选择Publish Data Source。
一旦连接上,就可以给数据源添加别名。我把它叫做Airbnb西雅图。

注意:上面的URI包含一个示例URI。您应该连接到自己的Atlas集群,并使用授权的用户名和密码。

创建一个仪表板

下一步是创建一个实际的仪表板来装饰我们的可视化图表了。在Dashboards部分中,选择New Dashboard并填写一个名称和描述,就像Ken的Airbnb Dashboard一样。这里就是我们在仪表盘中添加图表的地方。