ReferenceError: google 未定义 | pdfkit 中的谷歌图表答案

【问题标题】：ReferenceError: google is not defined | Google Charts in pdfkitReferenceError: google 未定义 | pdfkit 中的谷歌图表
【发布时间】：2023-04-05 17:17:01
【问题描述】：

我试图在使用 pdfkit 生成的 pdf 中呈现图形。我找到了这个解决方案https://quickchart.io/documentation/google-charts-image-server/#example

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

// Define your chart drawing function
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);

这很好，我在我的 pdf 中得到了一个生成的图表。所以尝试将动态数据赋予我编写的新函数

function drawtIntelligenceBarchar(intelligence) {
      console.log(intelligence)
      try{
        const data = google.visualization.arrayToDataTable([
          ['Intelligence', 'Intelligence Level',],
          ["Linguistic", intelligence["Linguistic"]],
          ["Logical", intelligence["Logical"]],
          ["Musical", intelligence["Musical"]],
          ["Visual-Spatial", intelligence["Visual-Spatial"]],
          ["Kinesthetic", intelligence["Kinesthetic"]],
          ["Intra-Personal", intelligence["Intra-Personal"]],
          ["Inter-Personal", intelligence["Inter-Personal"]],
          ["Naturalistic", intelligence["Naturalistic"]],
          ["Existential", intelligence["Existential"]]
        ]);
      
        const options = {
          title: 'Intelligence Graph',
          chartArea: {width: '70%'},
          hAxis: {
            title: 'AVERAGE   GOOD    VERY GOOD    EXCELLENT',
            minValue: 0,
            maxValue: 100,
          },
          vAxis: {
            title: 'INTELLIGENCE TYPE'
          }
        };
      
        const chart = new google.visualization.BarChart(container);
        chart.draw(data, options);
      } catch(error){
        console.log(error);
      }
      
    }

const intelligenceGraph = await GoogleChartsNode.render(drawtIntelligenceBarchar(intelligence));

然后我得到了这个错误

ReferenceError: google 未定义

如果你能在这方面帮助我，那就太好了。

【问题讨论】：

标签： express google-visualization server-side-rendering pdfkit

【解决方案1】：

前段时间我遇到过类似的问题，这里的问题是你必须考虑到谷歌图表是一个在页面呈现时加载的库，这意味着为了生成 pdf，它应该已经存在生成它。您可以使用的方法是使用无头浏览器来模拟页面已打开，然后加载依赖项，因此当您将 HTML 发送到 pdfkit 时，它将包含生成 pdf 所需的所有内容，或者您可以使用 selenium 做某事相似的。然而，棘手的部分是调整窗口大小以容纳所有图表，但您可以通过一些试验对其进行整理。

【讨论】：

这是一个不同的过程。要么改变方法，要么找到适合他方法的解决方案。我更喜欢与我的代码匹配的解决方案，而不是寻找不同的方法并从头开始。感谢您努力回答这个问题。

【解决方案2】：

这是由于子函数内部的变量智能可从外部函数访问。 quickcharts.io 有一个解决方案。不要使用函数，而是使用 const 变量在 js 字符串中编写代码并传递。

 const drawtIntelligenceBarchar = `
        const data = new google.visualization.DataTable();
        data.addColumn('string', 'Intelligence');
        data.addColumn('number', 'Intelligence Level (%)');
        data.addRows([
          ["Linguistic", ${intelligence["Linguistic"]}],
          ["Logical", ${intelligence["Logical"]}],
          ["Musical", ${intelligence["Musical"]}],
          ["Visual-Spatial", ${intelligence["Visual-Spatial"]}],
          ["Kinesthetic", ${intelligence["Kinesthetic"]}],
          ["Intra-Personal", ${intelligence["Intra-Personal"]}],
          ["Inter-Personal", ${intelligence["Inter-Personal"]}],
          ["Naturalistic", ${intelligence["Naturalistic"]}],
          ["Existential", ${intelligence["Existential"]}]
        ]);
      
        const options = {
          title: 'Intelligence Graph',
          chartArea: {width: '50%'},
          hAxis: {
            title: 'AVERAGE   GOOD    VERY GOOD    EXCELLENT',
            minValue: 0,
            maxValue: 100,
          },
          vAxis: {
            title: 'INTELLIGENCE TYPE'
          }
        };
      
        const chart = new google.visualization.BarChart(container);
        chart.draw(data, options);`;
    const intelligenceGraph = await GoogleChartsNode.render(drawtIntelligenceBarchar, {width: 500,
      height: 300,});
doc.image(intelligenceGraph,  0, 0,)

欲了解更多信息，请访问source code documentation

【讨论】：