ReferenceError: google 未定义 | 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

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：谷歌未定义

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

Answer 1

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

Answer 2

这是由于子 function 内部的可变智能可从外部 function 访问。 quickcharts.io 有一个解决方案。 而不是使用 function 使用 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,)

有关更多信息，请访问源代码文档