ReferenceError:google未定義|pdfkit中的Google圖表

我試圖在使用 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));

然后我得到了這個錯誤

參考錯誤：未定義谷歌

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

uj5u.com熱心網友回復：

不久前我遇到了類似的問題，這里的問題是您必須考慮 google charts 是一個在頁面呈現時加載的庫，這意味著為了生成 pdf，它應該在生成之前已經存在。您可以使用的方法是使用無頭瀏覽器來模擬頁面已打開，然后加載依賴項，因此當您將 HTML 發送到 pdfkit 時，它將包含生成 pdf 所需的所有內容，或者您??可以使用 selenium 執行某些操作相似的。然而，棘手的部分是調整視窗大小以容納所有圖表，但您可以通過一些試驗進行整理。

uj5u.com熱心網友回復：

這是由于外部函式可以訪問子函式內部的變數智能。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,)

有關更多資訊，請訪問源代碼檔案

標籤：表达 谷歌可视化 服务器端渲染 pdfkit

上一篇：更改Express.js請求中的應用設定

下一篇：最快驗證器：驗證兩個欄位不相等