javascript - 使用 ajax/jsonp 添加轴的 Rickshaw.js 图表

Question

我是 javascript jQuery 和 JSON 的新手，我正在启动一个项目，我想在浏览器中做一些图表。通过深入研究教程和示例，我想使用 JSON 收集的一些数据创建一个图表，然后使用该图表，如 examples 中所示。 (添加轴...)。

所以我很确定问题是用 var ajaxGraph = new Rickshaw.Graph.Ajax 创建图表不返回与 var graph = new Rickshaw.Graph 相同的对象。 Rickshaw.Class.create用于 var ajaxGraph = new Rickshaw.Graph.Ajax 的函数以我目前的技能来说太复杂了。我可以以某种方式从 Rickshaw.Graph.Ajax 获取正确的图形对象吗？或者我应该尝试单独使用 JSON，然后调用 var graph = new Rickshaw.Graph不知何故？

感谢您的任何提示。

Answer 1

我肯定会考虑单独处理 JSON 内容，将数据转换为正确的格式，然后将 Rickshaw 绑定(bind)到它。

这样做可能并不像您想象的那么难，并且在以后的不同工作中会有用。在我看来，使用 Rickshaw 的 ajax 抽象并不能真正让您摆脱复杂性。

这是我创建的截屏视频，它完全满足您的需求:http://tagtree.tv/d3-with-rickshaw-and-angular 。它可能会更复杂一些，因为它将 Rickshaw 图放入 Angularjs 应用程序中，这有它自己的挑战。但它确实向您展示了如何将从服务器获取的数据转换为正确的格式以提供给 Rickshaw。

使用 jQuery 从服务器获取数据非常容易。您可以使用简写 ajax 方法:

http://api.jquery.com/category/ajax/shorthand-methods/

或者甚至了解 ajax 调用(我认为最好从这里开始):

http://api.jquery.com/jQuery.ajax/

然后调整数据以便 Rickshaw 可以绑定(bind)到它，我建议使用下划线:

http://underscorejs.org/