如何从使用chartjs创建的图形中获取图像

问题描述 投票：0回答：1

我正在学习如何使用Chart JS创建图形。这是我的脚本HTML：

<!DOCTYPE html>
<html>
<head>
        <script type="text/javascript" src="Chart.js"></script>
</head>
<body>
        <style type="text/css">
                body{
                        font-family: roboto;
                }
        </style>

        <h2>Example of Chart JS</h2>



        <div style="width: 500px;height: 500px">
                <canvas id="myChart"></canvas>
        </div>

        <script>
new Chart(document.getElementById("myChart"), {
    type: 'bar',
    data: {
      labels: ["1900", "1950", "1999", "2050"],
      datasets: [
        {
          label: "Australia",
          backgroundColor: "#3e95cd",
          data: [130,212,252,241]
        }, {
          label: "Asia",
          backgroundColor: "#8e5ea2",
          data: [348,705,1075,2034]
        }
      ]
    },
    options: {
      title: {
        display: true,
        text: 'Population growth (millions)'
      }
    }
});
        </script>
</body>
</html>

example of graph

图形的结果如上图所示。

我想使用curl或wget命令获取图形的图像，但是它失败，因为单击鼠标时没有复制链接地址。如下图所示，在选项中仅图像另存为和复制图像：

no copy link address

因此，如何从使用图表JS创建的图表中获取图像？因为我想将图形嵌入到其他站点或将其发送到电子邮件。我真的对此事一无所知。

javascript html chart.js
1个回答
0
投票

您绝对可以使用toDataURL或内置的Chart.js函数toBase64Image。答案here涵盖了如何做到这一点。这可能就足够了，特别是如果您的用例完全在浏览器中。

缺点是，您不能像上面提到的那样使用wget或curl轻松编写脚本。

此问题的解决方案是使用图表绘制服务，例如QuickChart，这是我构建的一个开放源代码项目，用于将Chart.js图形绘制为图像。

将您的图表配置并填充到API URL中（这使用公共端点，但是您也可以自己托管它：]]

https://quickchart.io/chart?c={ type: 'bar', data: { labels: ["1900", "1950", "1999", "2050"], datasets: [ { label: "Australia", backgroundColor: "#3e95cd", data: [130,212,252,241] }, { label: "Asia", backgroundColor: "#8e5ea2", data: [348,705,1075,2034] } ] }, options: { title: { display: true, text: 'Population growth (millions)' } }}

默认情况下，此URL产生以下PNG图像：

Chart.js rendered image

QuickChart / Chart.js sandbox是测试Chart.js配置如何渲染到图像的好方法。

您可以使用curl或wget直接获取URL编码的图表。该URL非常详尽，但是它包含了整个图表配置（请注意，它是URL编码的）：

curl -o mychart.png 'https://quickchart.io/chart?bkg=white&c=%7B%0A%20%20%20%20type%3A%20%27bar%27%2C%0A%20%20%20%20data%3A%20%7B%0A%20%20%20%20%20%20labels%3A%20%5B%221900%22%2C%20%221950%22%2C%20%221999%22%2C%20%222050%22%5D%2C%0A%20%20%20%20%20%20datasets%3A%20%5B%0A%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20label%3A%20%22Australia%22%2C%0A%20%20%20%20%20%20%20%20%20%20backgroundColor%3A%20%22%233e95cd%22%2C%0A%20%20%20%20%20%20%20%20%20%20data%3A%20%5B130%2C212%2C252%2C241%5D%0A%20%20%20%20%20%20%20%20%7D%2C%20%7B%0A%20%20%20%20%20%20%20%20%20%20label%3A%20%22Asia%22%2C%0A%20%20%20%20%20%20%20%20%20%20backgroundColor%3A%20%22%238e5ea2%22%2C%0A%20%20%20%20%20%20%20%20%20%20data%3A%20%5B348%2C705%2C1075%2C2034%5D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%5D%0A%20%20%20%20%7D%2C%0A%20%20%20%20options%3A%20%7B%0A%20%20%20%20%20%20title%3A%20%7B%0A%20%20%20%20%20%20%20%20display%3A%20true%2C%0A%20%20%20%20%20%20%20%20text%3A%20%27Population%20growth%20(millions)%27%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%7D'
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.