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

Question

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

所以我很确定问题在于创建图表 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 绑定到它。

这样做可能并不像您想象的那么难，并且对以后的不同工作很有用。在我看来，使用 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 可以绑定到它，我建议使用下划线：

http://underscorejs.org/