带有 Ext JS 图表的股票

• 下载源代码 - 7.61 KB

这篇文章摘录自我的博客。原文 在此。

引言

我会简要介绍 Ext JS，然后给出使用 Ext 的简短入门指南。如果您已经熟悉 Ext，请直接跳到图表部分。如果您只想查看最终演示，请直接跳到最后。

Ext JS 是又一个 JavaScript 库。然而，它的重点是 UI 小部件，允许您在浏览器中构建用户界面。这个概念早已存在，但 Ext JS 在众多竞争者中脱颖而出，其方式足以令人尴尬。该库的小部件在视觉上令人惊叹，功能丰富，同时保持了高.度性。

我承认，在去年从事一个使用 Ext JS 的项目之前，我从未听说过它。我做了大约五年的自由网页开发，而且我倾向于紧跟最新的网络技术，所以我很惊讶它居然在我眼皮底下溜走了。

最近，团队 宣布 了 Ext 3.0 的最新发布候选版本。我想尝试一些不太受关注的新功能，因此我一直在进行一个小实验，使用新的图表功能来显示股票指数。

你好，世界！

在我们看图表之前，让我们先从一个非常简单的 Ext 示例开始。请 下载 最新的 Ext 版本。设置一个简单的 HTML 页面并添加一些包含文件。

<link rel="stylesheet" type="text/css" 
  href="ext-3.0-rc3/resources/css/ext-all.css" />
<script type="text/javascript" 
  src="ext-3.0-rc3/adapter/ext/ext-base.js"></script>
<script type="text/javascript" 
  src="ext-3.0-rc3/ext-all-debug.js"></script>

此时，我们应该可以在浏览器中加载空白页面而没有任何错误。

下一步是编写一些代码来使用 Ext 库执行一些操作。为了不惹怒众神，我们将创建一个弹出式“Hello World”窗口。以下是 JavaScript 代码，因此请将其放入 <script> 标签或外部 .js 文件中。

Ext.onReady(function() {
  new Ext.Window({
    title: 'Hello, world!',
    width: 280,
    height: 120
  }).show();
});

我们使用 Ext.onReady(...) 来设置 DOM 加载完成后的回调。此回调将创建一个新的 Ext.Window 对象并显示它。Ext.Window 构造函数的参数是一个配置对象。

配置对象的概念在 Ext 中被广泛使用，而且它可能相当繁琐且难以适应。您*必须*保持 Ext 文档打开（见下文）才能知道要使用哪些参数。在我们简单的示例中，我们只指定了窗口的标题和尺寸。

在浏览器中加载页面。结果应该看起来像这样

请注意，您可以随意拖动窗口并在屏幕上调整其大小。

查看 演示，或 下载 代码。

有关更高级示例的精美集合，请查看 Ext 网站上的 示例（它们也包含在 Ext 下载中）。这些示例很棒。我唯一的批评是它们在实现功能的方式上可能有些不一致。

另一个必不可少的资源是 Ext 文档（这也包含在下载中）。

Ext JS 图表

在某种程度上，为图表功能使用了 Flash 是一件遗憾的事，因为该库在过去已经取得了如此大的成就而无需依赖它。尽管如此，实际的 Flash 小程序已经被很好地封装起来，甚至可以与其容器平滑地调整大小。

我们可以基于上面的简单示例，在窗口中添加一个图表。

Ext.onReady(function() {

  var store = new Ext.data.JsonStore({
    url: 'data.php',
    baseParams: {
      symbol: 'GOOG'
    },
    autoLoad: true,
    root: 'data',
    fields: ['date', 'close']
  });

  new Ext.Window({
    title: 'GOOG',
    width: 400,
    height: 300,
    items: [
      new Ext.chart.LineChart({
        store: store,
        xField: 'date',
        yField: 'close'
      })
    ]
  }).show();
});

我们在这里引入了两个新概念。首先是“store”的使用。在这种情况下，是 JsonStore。引用文档的话

Store 类封装了 Record 对象的客户端缓存，这些对象为组件提供输入数据 [...]

所以基本上，store 负责获取和存储我们的数据。JsonStore 使用 JsonReader 以 JSON 格式获取数据，使数据与 UI 组件完全分离。然后，数据在内部表示为一系列 Record。

让我们看一下我们设置的配置参数。第一个参数 url 是我们将要加载数据的 URL，baseParams 指定要发送到此 URL 的参数。默认情况下，store 不会立即尝试加载数据，因此我们指定 autoLoad 参数，这样我们以后就不必自己调用 store.load() 了。root 参数告诉 store 在返回的对象中查找记录主体，而 fields 是指定单个记录结构的简写方式。

我们引入的第二个新概念是在窗口中添加一个组件。我们通过在 'items' 属性中指定一个组件数组来实现这一点。我们添加的唯一组件是 LineChart 组件。这里的配置只是将组件链接到我们定义的 store，并指定要绑定到图表轴的字段。

一旦 store 加载完成，我们应该得到这个

查看 演示，或 下载 代码。

当前 Ext 中用于样式化图表的文档相当简略。由于图表的底层 Flash 小程序基于 Yahoo! UI Library 的小程序，有关图表样式化的更多信息可以从 它们的文档 中获得。

获取数据

现在让我们看一下流程的服务器端。

数据由一个 PHP 脚本生成，该脚本又从 Yahoo! 获取股票数据。Yahoo! 友好地提供了过去约五年每日股票价格（包括开盘价、收盘价、最高价和最低价）的 CSV 格式数据集。我们不想将如此多的数据推送到浏览器，因此我们将采取几个步骤

1. 如果数据未缓存，则获取数据
2. 提取每天的收盘价
3. 缓存数据
4. 选择适当的日期范围进行显示
5. 对剩余数据进行采样，以便得到适合绘制的点数
6. 将数据编码为 JSON 后返回

我们现在有一个简单的 Web 服务，允许我们指定多个参数

• symbol — 股票代码。必需。请注意，因为我们使用的是 Yahoo! 股票数据，所以我们仅限于在 NASDAQ 上市的股票。
• start — 开始日期。指定为 Unix 时间戳。默认为大约一年前。
• span — 获取数据的时间跨度。也以 Unix 时间戳给出。默认为大约一年。
• points — 要采样的点数。默认为 20。

服务的一个示例结果可能如下所示

{"symbol": "MSFT", "data": [
  {"date": "2008-07-24", "close": 25},
  {"date": "2008-08-12", "close": 28},
  //...
]}

我不会在此粘贴 PHP 脚本。但是，可以 下载。

一旦数据成功加载，就会触发一个事件，图表一直在监听该事件。然后图表可以使用新数据重绘自身。

深入研究

为了让我们的示例更成熟，并突出 Ext 的一些其他功能，我整理了一个更全面的示例。请参阅下面的屏幕截图，并参考 实时演示。

我在这里不会详细介绍，只会列出我使用的一些功能

• Viewport 结合 BorderLayout，以确保界面能够占据浏览器窗口提供的所有空间。
• 一个模态弹出窗口，其中包含一个自动完成的 ComboBox。提供 NASDAQ-100 列表供用户选择。
• 一个 TabPanel 来组织已加载的不同股票。选择不同的选项卡将更改显示的图表，关闭选项卡将卸载数据和图表。
• 一个 ListView 组件，这是 GridPanel 的新轻量级版本。
• Chart 对象的一些更高级功能，包括使用 TimeAxis，将鼠标移动与 ListView 组件关联，以及对图表样式进行一些更改。

我保留了 JavaScript 未压缩版本，因此欢迎您随意查看。

这篇文章摘录自我的博客。原文 在此。