ruby-on-rails - 在 Ruby on Rails 中显示可视数据

标签 ruby-on-rails web-applications responsive-design

下面的屏幕截图,从某个数据库读取数据 - 我想我可以通过我正在关注的一些 RubyOnRails 教程来从数据库中读取数据 - 但是我应该如何以漂亮的形式表示这些数据想要像下面这样的图片吗?

我应该快速熟悉哪些工具、框架等才能表示这样的数据?

由于我应该专注于 Rails,所以如果您的建议也能与 Rails 很好地集成,那就太好了......

enter image description here

屏幕截图2:对于这个,我“认为”我可以使用“Google Charts”,但也很高兴收到您的建议。

enter image description here

最佳答案

要制作图表,您可以使用 javascript。那里有很多图书馆。

第一张图中的那些小图表称为 Spark 线。它们可以用这个 jquery 插件制作

jQuery Sparklines

还有这个纯 JavaScript 工具

sparklines.js

对于其他图表,我认为最好的免费图表是 d3图书馆,特别是 nvd3库女巫构建在 d3 库之上。

还有一些与 Raphaël—JavaScript Library 相关的解决方案。 一是gRaphaël 。 我个人不喜欢这个,但看看吧。

图表库通常使用 SVG(可扩展矢量图形。前往 here 了解 SVG 和 CSS)来显示图表。然后您通过 JSON 从 Rails 提供数据。

Rails 可以从 Controller 渲染 JSON,您可以使用 jbuilder “Jbuilder 为您提供了一个简单的 DSL,用于声明 JSON 结构,从而击败了庞大的哈希结构。”

我通常会在 lib 目录中得到一个自定义类,因为绘制图表通常需要进行大量复杂的查询并处理数据库中的数据,然后才能将其发送到图表。

您应该会看到这些railscast。 railscasts#223 railscasts#223revised

第一个使用 highcharts(不是免费的),最后一个使用 morris.js 。莫里斯相当简单,但在某些追逐中已经足够了。 最后一个是最好的,但我想你必须订阅才能看到它。

这里有很多东西要学,而且很有趣!

关于ruby-on-rails - 在 Ruby on Rails 中显示可视数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14295458/

相关文章:

ios - iOS 主屏幕上的 Web 应用程序 - 导航和打印?

google-maps - 我可以使用用于房地产网络应用程序的 Google Maps API 吗?

javascript - 无法编译 react 应用程序,因为它说 "Module not found"

html - 使用响应式图像创建响应式网格、堆栈

html - 如何使此输入元素响应低分辨率屏幕?

ruby-on-rails - 具有嵌套属性的Rails表单(accepts_nested_attributes_for)

ruby-on-rails - 何时在 Ruby on Rails 中使用 lambda?

ruby-on-rails - 如何在没有 Active Storage 的情况下安装 Action Text?

ruby-on-rails - rails 3 - 用户仪表板

javascript - 如何通过js控制屏幕宽度?