highcharts 电子邮件图表-条形图、面积图和饼图

kse8i1jr  于 2022-11-10  发布在  Highcharts
关注(0)|答案(5)|浏览(179)

我想在我的电子邮件中显示图表-条形图,面积图,饼图。我尝试了一些基于CSS的图表与内联样式,但它仍然没有显示。这是在电子邮件中显示图表的最佳方式。
图像是唯一的选择吗?

yizd12fk

yizd12fk1#

发送HTML电子邮件本身是一项棘手的工作。各种邮件客户端的各种标准和限制以及大量的安全限制使得创建跨浏览器/客户端的HTML电子邮件传递非常困难。作为一条经验法则,我认为您使用的技术越老,它在邮件客户端之间的统一复制效果就越好。“老”技术我指的是表驱动HTML、带有非常基本的CSS属性的内联CSS、没有脚本等等。

在电子邮件中显示图表的可能性:

  1. Flash图表-几乎所有邮件客户端都会阻止此操作。
  2. HTML5图表-大多数电子邮件客户端(包括基于Web的客户端)将阻止SVG,也会使“画布”驱动的图表无用,因为JavaScript肯定会被阻止。
    1.纯HTML和CSS图表可能可以工作,但由于大多数流行的图表库使用高级HTML功能,因此大多数图表在电子邮件中无法正常显示。
    1.基于图像的图表--最好的选择是图表的图像。由于内联图像在电子邮件客户端中广泛发送,我的建议是将图表生成为图像,然后将其作为HTML邮件的一部分。大多数图表组件(如FusionCharts、Highcharts等)都允许您将图表生成为图像。
    如果您打算使用基于图像的图表,但又希望它是动态生成的,那么创建一个服务器端脚本是一个不错的技巧,您可以通过query-string将数据发送到该脚本,然后该脚本将返回使用该数据生成的图表的图像。
  • 如果您在部署基于图像的图表时遇到任何问题,那么您可以考虑使用简单的<table><div>和内联CSS来生成图表的纯HTML图表。遗憾的是,我认为市场上没有现成的组件可以实现这一点。*
yh2wf1be

yh2wf1be2#

  • 免责声明:我是Image-Charts的创始人 *。

作为一个indiehacker,我有同样的问题,你每次我开始一个新的SaaS(重写从头图像生成后端,然后通过电子邮件发送图表)。
这就是为什么我构建了**a drop-in-replacement for Google Image Charts**👍,并在其上添加了gif animation🚀(电子邮件中的图表动画非常棒!!)。
它被称为图像图表。没有更多的服务器端图表渲染痛苦,没有缩放问题,它是 lightning 般的速度,1个URL = 1个图像图表。

8yoxcaq7

8yoxcaq73#

3.5但 我 的 Ramen 团队 最近 将 一些 内部 功能 剥离 到 了 一 个 独立 的 产品 中 , 该 产品 可以 做到 :https://ChartURL.com 的 最 大 值
您 可以 使用 " 加密 URL " 方案 动态 生成 图表 , 或者 您 可以 向 我们 发送 大量 数据 , 我们 将 返回 一 个 短 URL , 该 URL 将 解析 为 图像 。
有 一 个 免费 的 层级 , 但 一旦 你 每月 获得 超过 几百 张 图片 , 我们 就会 要求 你 开始 付费 。 尽管 如此 , 我们 确实 努力 使 定价 尽 可能 友好 。 因此 , 如果 用例 对 你 的 业务 至关 重要 , 这 应该 是 一 个 不用 动 脑筋 的 问题 。
它 构建 在 http://C3js.org 之上 , 因此 您 可以 灵活 地 生成 内容 。
这些 网址 可以 用 在 网络 应用 程序 和 移动 应用 程序 中 , 但 最初 的 意图 是 电子 邮件 图表 , 所以 我 希望 这 有 帮助 !

rqdpfwrv

rqdpfwrv4#

如果你习惯于用Javascript构建图表,那么将大量的图表渲染成图像在技术上是相当复杂的。你需要选择一些渲染服务(例如无头浏览器或画布实现),并进行大量的故障排除。
我经历了这个过程,并发布了开源的QuickChart,这是一个Web API,可以获取数据并生成适合电子邮件的静态图像。https://github.com/typpo/quickchart
它基于Chart.js API。给定如下图表配置:

{
  type: 'bar',
  data: {
    labels: [2012, 2013, 2014, 2015, 2016],
    datasets: [{
      label: 'Data',
      data: [12, 6, 5, 18, 12]
    }]
  }
}

将其填入URL:https://quickchart.io/chart?bkg=white&c={ type: 'bar', data: { labels: [2012, 2013, 2014, 2015, 2016], datasets: [{ label: 'Data', data: [12, 6, 5, 18, 12] }] }}
它将返回一个静态图像:

Quickchart.io上有一个托管的(也是免费的)版本,但是你可以自己在Docker上运行Web服务,或者直接从源代码运行。

ej83mcc0

ej83mcc05#

  • 免责声明:我是Charty* 的创始人

您可以尝试使用Charty,它可以在几秒钟内创建交互式图表,并且支持25种以上的图表类型。
链接:Charty

相关问题