是否可以将谷歌图表另存为图像？

发布于 2024-10-27 03:48:29 字数 1257 浏览 7 评论 0原文

我正在制作一个应用程序，其中我需要将谷歌图表保存为图像。我只使用 tomcat、servlet 和 javascript。有没有办法将以下生成的图表另存为图像？（请参阅帖子末尾的代码）。这个想法是用户会看到这个图表，然后可以选择将其上传到他的 Facebook 个人资料中。我不确定这是否可以以其本机格式上传到 Facebook，或者是否需要保存为 jpg。

<html>    
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load("visualization", "1", {packages:["corechart"]});
  google.setOnLoadCallback(drawChart);
  function drawChart() {
    var data = new google.visualization.DataTable();

    data.addColumn('string', 'Year');
    data.addColumn('number', 'Sales');
    data.addRows(4);
    data.setValue(0, 0, ''+2004);
    data.setValue(0, 1, 1000);
    data.setValue(1, 0, '2005');
    data.setValue(1, 1, 1170);
    data.setValue(2, 0, '2006');
    data.setValue(2, 1, 860);
    data.setValue(3, 0, '2007');
    data.setValue(3, 1, 1030.5);

    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(data, {width: 400, height: 240, title: 'Company Performance',hAxis: {title: "X", titleTextStyle: {color: "green"}}});
  }

</script>
  </head>

  <body>
    <div id="chart_div"></div>
  </body>
</html>

原文

I am making an application in which I would need to save the google chart as an image . All I am using is tomcat, servlets and javascript. Is there a way to save the following generated chart as an image? (refer to code at the end of post).
The idea is that user would see this chart and then would have the option of uploading it to his facebook profile. I am not sure if this will be uploadable to facebook in its native format or will be needed to be saved as a jpg.

<html>    
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load("visualization", "1", {packages:["corechart"]});
  google.setOnLoadCallback(drawChart);
  function drawChart() {
    var data = new google.visualization.DataTable();

    data.addColumn('string', 'Year');
    data.addColumn('number', 'Sales');
    data.addRows(4);
    data.setValue(0, 0, ''+2004);
    data.setValue(0, 1, 1000);
    data.setValue(1, 0, '2005');
    data.setValue(1, 1, 1170);
    data.setValue(2, 0, '2006');
    data.setValue(2, 1, 860);
    data.setValue(3, 0, '2007');
    data.setValue(3, 1, 1030.5);

    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(data, {width: 400, height: 240, title: 'Company Performance',hAxis: {title: "X", titleTextStyle: {color: "green"}}});
  }

</script>
  </head>

  <body>
    <div id="chart_div"></div>
  </body>
</html>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

夏至、离别 2024-11-03 03:48:29

此功能似乎是最近¹添加的：

chart.getImageURI()

请参阅文档。

^{¹它似乎已在 2014 年 1 月 29 日的版本中添加。}

It looks like this feature was recently¹ added as:

chart.getImageURI()

See the documentation.

^{¹It appears to have been added in the Jan 29, 2014 release.}

回复收藏 0 原文

梦断已成空 2024-11-03 03:48:29

Riccardo Govoni 的示例解决方案如谷歌图表的问题页面所示。这个想法是将 SVG 转换为 Canvas 元素。

链接：

教程：http://www.battlehorse.net/page/topics/charts/save_google_charts_as_image.html< /a>

示例页面：http://www.battlehorse.net/attach/topics/charts/google_charts_to_image。 html

回复收藏 0 原文

风为裳 2024-11-03 03:48:29

这就是我所做的

http://danml.com/#/download.html

 download(chart.getImageURI(), 'fileName.png', "image/png");

如果 3kb 脚本太多了 http://www.closure-compiler.appspot.com/home

This is what i do

http://danml.com/#/download.html

 download(chart.getImageURI(), 'fileName.png', "image/png");

if 3kb script is too much use http://www.closure-compiler.appspot.com/home

回复收藏 0 原文

巴黎盛开的樱花 2024-11-03 03:48:29

最简单的选择是使用 Google Chart API

回复收藏 0 原文

枯寂 2024-11-03 03:48:29

使用 grChartImg 库。这是 George Risvas 提供的跨浏览器解决方案。
支持所有浏览器，包括旧版本的 IE，并为您提供许多自动程序，例如将图表转换为图像、下载、在对话框中显示图表、将其上传到服务器等。

有关详细信息，请参阅 www.chartstoimage。

我希望对你有帮助。

回复收藏 0 原文

只是一片海 2024-11-03 03:48:29

首先，下载这个库：

http://danml.com/download.html

然后你就可以了在图表中添加事件监听器

function: 
 google.charts.setOnLoadCallback(drawVisualization);

  function drawVisualization() {

var chart = new google.visualization.ComboChart(document.getElementById('chart_tickets'));
    google.visualization.events.addListener(chart, 'ready', function () {

    $("#GraphDownloadTickets").click(function() {
         download(chart.getImageURI(), 'fileName.png', "image/png")

    });
}

First, download this library :

http://danml.com/download.html

and after you have just to add an events listener inside your chart

function: 
 google.charts.setOnLoadCallback(drawVisualization);

  function drawVisualization() {

var chart = new google.visualization.ComboChart(document.getElementById('chart_tickets'));
    google.visualization.events.addListener(chart, 'ready', function () {

    $("#GraphDownloadTickets").click(function() {
         download(chart.getImageURI(), 'fileName.png', "image/png")

    });
}

回复收藏 0 原文

停滞 2024-11-03 03:48:29

这是 React js 的例子。您可以从react-google-charts获取base64图像，我已将其转换为png/jpg文件

import { Chart } from "react-google-charts";

    const [imageUri, setImageUri] = useState("");

    function dataURLtoFile(dataurl, filename) {
        var arr = dataurl.split(","),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n);

        while (n--) {
          u8arr[n] = bstr.charCodeAt(n);
        }
        return new File([u8arr], filename, { type: mime });
     }
   const file = dataURLtoFile(imageUri, "image.jpg");

         <Chart
          chartType="LineChart"
          data={graphData}
          width="100%"
          height="500px"
          legendToggle
          chartEvents={[
            {
              eventName: "ready",
              callback: (Chart) => {
                setImageUri(Chart.chartWrapper.getChart().getImageURI());
              },
            },
          ]}
          options={{
            hAxis: {
              title: "Time",
            },
            vAxis: {
              title: "Threshold",
              format: "decimal",
            },
            series: {
              1: { curveType: "function" },
            },
          }}
        />

this is the react js example. You can get base64 image from the react-google-charts and I have converted it to a png/jpg file

import { Chart } from "react-google-charts";

    const [imageUri, setImageUri] = useState("");

    function dataURLtoFile(dataurl, filename) {
        var arr = dataurl.split(","),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n);

        while (n--) {
          u8arr[n] = bstr.charCodeAt(n);
        }
        return new File([u8arr], filename, { type: mime });
     }
   const file = dataURLtoFile(imageUri, "image.jpg");

         <Chart
          chartType="LineChart"
          data={graphData}
          width="100%"
          height="500px"
          legendToggle
          chartEvents={[
            {
              eventName: "ready",
              callback: (Chart) => {
                setImageUri(Chart.chartWrapper.getChart().getImageURI());
              },
            },
          ]}
          options={{
            hAxis: {
              title: "Time",
            },
            vAxis: {
              title: "Threshold",
              format: "decimal",
            },
            series: {
              1: { curveType: "function" },
            },
          }}
        />

回复收藏 0 原文

~没有更多了~