使用Ruby on Rails在后端生成Chartjs图表

问题描述 投票:0回答:3

我正在使用Chartjs在我的rails应用程序中制作一些漂亮的图表。一切都很好,除了我希望能够将这些图表的图像通过电子邮件发送给人们。我意识到我正在使用javascript库来生成图像。有没有办法让rails在后端运行此库,保存图表图像,并将其作为电子邮件附件提供?

javascript ruby-on-rails
3个回答
1
投票

要通过电子邮件发送Chart.js图表​​,您必须将其呈现为图像。这通常意味着设置一个具有Javascript运行时的后端,这是一个非常重要的解决方案,只需将图表放入电子邮件中即可。

我也有这个问题,并构建了QuickChart,这是一个open source Web服务,将Chart.js配置呈现为图像。

例如,假设这是您当前在应用程序中使用的Chart.js配置:

{
  type: 'bar',
  data: {
    labels: ['January', 'February', 'March', 'April', 'May'],
    datasets: [{
      label: 'Data',
      data: [ 50, 60, 70, 180, 190 ]
    }]
  }
}

将此配置打包到URL中并将其传递给https://quickchart.io/chart?c=端点,如下所示:

https://quickchart.io/chart?bkg=white&c={type:'bar',data:{labels:['January','February','March','April','May'],datasets:[{label:'Data',data:[50,60,70,180,190]}]}}

这是你的配置URL encode的最佳做法。当您单击链接时,您的浏览器会自动执行此操作,但您可以在Ruby应用程序中自行完成:

require 'uri'
config = """{
  type: 'bar',
  data: {
    labels: ['January', 'February', 'March', 'April', 'May'],
    datasets: [{
      label: 'Data',
      data: [ 50, 60, 70, 180, 190 ]
    }]
  }
}
"""
encoded = URI::encode(config.strip)

# Output a URL to my image
puts "https://quickchart.io/chart?c=#{encoded}"

在此示例中,输出是您呈现的Chart.js图表​​的URL。此图表图像可直接嵌入电子邮件中,因为它不需要Javascript:

Rendered chart image


0
投票

如果要在服务器端使用JavaScript库,则需要在服务器上运行Javascript运行时 - 即Node.js.无论如何,这是资产管道的依赖关系,因此您可能已经安装了它。那么也许你可以尝试一下this library,虽然我自己从未使用过它。 npm将成为你的朋友,如果事实证明这是一个哑弹。

那么问题是如何从Rails调用它。一个快速的谷歌建议there's a gem for exactly that,但我再次害怕我没有使用它,这里的一些人似乎觉得使用它令人沮丧。

您的另一个选择是运行服务器以提供此功能作为响应HTTP请求的微服务,您可以使用rest-client之类的内容轻松地从后端发送。使用Express.js实际上很容易设置这样的东西。

编辑:尽可能直接回答了你的问题,你可能想调查Chartkick,它有一个ruby API,但我相信Chart.js是一个依赖项,所以你可以用它来重现你的图表。


0
投票

实际上我正在使用一个名为wannacharts.com的新服务。不需要Js或Jquery ...你只需要将json发布到wannacharts的url并且api将json中的base64图像或url返回到png图像中,其中包含图表。非常简单干净。

  • 创建您的帐户,
  • 登录
  • 得到api-key,
  • 并使用里面的图表设计器来设置图表的常规参数。

他们网站上显示的json必须具有以下格式:

{
    "provider_id":1,
    "chart_id": 2,
    "api_key":"m075881c4a169784dd05bdaf33",
    "data": [{
      "color":"#f1c454",
      "xValue": "Jan",
      "yValue": 21.5
  },{
      "color":"#79b599",
      "xValue": "Feb", 
      "yValue": 25
  },{
      "color":"#d97e78",
      "xValue": "Mar", 
      "yValue": 14.4
  }]
  }

该网站的常见问题是在这里http://wannacharts.com/faq.php

© www.soinside.com 2019 - 2024. All rights reserved.