12

我正在尝试使用 Google 图表在电子邮件中嵌入图表图像。所以每个用户都会有一个独特的图表。

我们是否可以使用 API 并嵌入一个唯一的 URL，该 URL 将呈现图表并将图像发送到电子邮件客户端。

4

5 回答 5

8

您可以使用chart.getImageURI()以下方法获取图表的 PNG 版本：

需要在图表绘制好之后，所以在ready事件中！

var my_div = document.getElementById('my_div');
var my_chart = new google.visualization.ChartType(chart_div);

google.visualization.events.addListener(my_chart, 'ready', function () {
  my_div.innerHTML = '<img src="' + chart.getImageURI() + '">';
});

my_chart.draw(data);
于 2014-06-04T14:10:48.380 回答
5

可以使用Google Chart Wizard生成将呈现图表图像的 url 。但是，该服务最近（我相信是 4 月）因为已弃用。它仍然可以正常工作，但是对于长期解决方案，您可能必须想出另一种方法。

编辑

另一种方法是在发送电子邮件之前生成图像并将其保存到您的服务器。您可以通过在服务器上设置一个页面来专门通过解析给定的 slug 来生成图表，并在加载图表时发送带有图像数据的 POST 请求。您可以使用隐藏的画布（需要 HTML5）和canvg javascript 插件来访问数据 URI：

chart_area = document.getElementById("chart_div").getElementsByTagName('iframe')[0].contentDocument.getElementById("chartArea");
svg = chart_area.innerHTML;
canvas = document.getElementById("hidden_canvas");
canvas.setAttribute('width', chart_area.offsetWidth);
canvas.setAttribute('height', chart_area.offsetHeight);

canvg(canvas, svg);
image_data_uri = canvas.toDataURL("image/png");
于 2012-07-02T21:35:29.240 回答
5

不久前我遇到了同样的问题，并在 SA 上找到了您的问题。由于 Google Image Charts 自 2012 年起被弃用，我构建了https://image-charts.com来替代 Google Image Charts，以便将图表和图形嵌入到电子邮件中（右键单击下面的图像并查看 URL）：

https://image-charts.com/chart?chs=700x300&chxt=x,y&chl=2018|2017|2015&chd=t:60,40,20&cht=pa&chdl=Image|Charts|Rocks&chf=ps0-0,lg,45,ffeb3b,0.2,f443367C,1|ps0-1,lg,45,8bc34a,0.2,0096887C,1|ps0-2,lg,45,EA469E,0.2,03A9F47C,1&chan


https://image-charts.com/chart?cht=lc&chs=700x300&chd=t:10,25,30,40,12,48,100,20,47,29,84,30,27,50,70&chxt=x,y&chxl=0:|Jun|Jul|Aug|Sep|Oct|Nov|Dec|Jan|1:||50|100&chm=B,FCECF4,0,0,0&chco=E4061C&chdl=Coffee consumed&chma=0,0,20,10&chl=||||||such a very   big project!


https://image-charts.com/chart?chs=700x300&cht=gv&chl=digraph {a -> b[label="0.2",weight="0.2"];a -> c[label="0.4",weight="0.4"];c -> b[label="0.6",weight="0.6"];c -> e[label="0.6",weight="0.6"];e -> e[label="0.1",weight="0.1"];e -> b[label="0.7",weight="0.7"];}
于 2018-09-14T10:12:51.917 回答
1

聚会有点晚了，但我们刚刚为这个确切的需求构建了https://ChartURL.com，因为尽管这个问题已经有将近 3.5 年的历史了，但在 ChartURL 之前最好的解决方案是已弃用的 Google Image Charts API :)

希望这可以帮助某人！

于 2015-11-12T16:05:48.653 回答
0

要将 Google Charts 呈现为图像，您可以使用Google Charts Node，这是一个使用 Puppeteer 呈现图表的开源项目。

google-charts-node可作为 NPM 库使用，可以像这样使用：

const GoogleChartsNode = require('google-charts-node');

function drawChart() {
  const data = google.visualization.arrayToDataTable([
    ['City', '2010 Population',],
    ['New York City, NY', 8175000],
    ['Los Angeles, CA', 3792000],
    ['Chicago, IL', 2695000],
    ['Houston, TX', 2099000],
    ['Philadelphia, PA', 1526000]
  ]);

  const options = {
    title: 'Population of Largest U.S. Cities',
    chartArea: {width: '50%'},
    hAxis: {
      title: 'Total Population',
      minValue: 0
    },
    vAxis: {
      title: 'City'
    }
  };

  const chart = new google.visualization.BarChart(container);
  chart.draw(data, options);
}

// Render the chart to image
const image = await GoogleChartsNode.render(drawChart);

现在您可以将image缓冲区保存为文件或将其作为 HTTP 响应返回等。它看起来像这样：

谷歌图表作为图像

Google Charts 节点渲染器也可用作 Web 服务，如此处所述，因此您可以在除 JS 之外的任何语言中使用它。

如果您对使用更通用的开源图表格式感兴趣，您还可以使用QuickChart，这是一个 Chart.js 渲染 API。

于 2020-06-24T21:50:55.277 回答