ReferenceError: google is not defined | Google Charts in pdfkit

Question

我试图在使用 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 is not defined

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

Answer 1

我刚才遇到过类似的问题，这里的问题是你必须考虑 google 图表是一个在页面呈现时加载的库，这意味着为了生成 pdf它应该在生成之前就已经存在了。您可以使用的方法是使用无头浏览器来模拟页面已打开，然后加载依赖项，因此当您将 HTML 发送到 pdfkit 时，它将包含生成 pdf 所需的一切，或者您可以使用硒做类似的事情。然而，棘手的部分是调整 window 大小以容纳所有图表，但您可以通过一些试验来解决它。

Answer 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

ReferenceError: google is not defined | Google Charts in pdfkit

ReferenceError: google is not defined | Google Charts in pdfkit

google-visualization

pdfkit

express

server-side-rendering