我可以将参数传递给 Google Charts Load 的回调函数吗？

Question

我正在尝试使用 Google Charts、SnappyPDF 和 Laravel 在 PDF 上动态显示图表，最初基于 this post。我在视图中发送了一个 Laravel $arrayChart 变量进行测试，并取得了成功：

    <script type="text/javascript" src="http://www.google.com/jsapi"></script>

      <script type="text/javascript">
        function init() {
          google.load("visualization", "1.1", {
            packages: ["corechart"],
            callback: 'drawCharts'
          });
        }

        function drawCharts() {
          var data = google.visualization.arrayToDataTable({!! $arrayChart !!});
          var options = {
            title: 'My Daily Activities',
          };
          var chart = new google.visualization.ColumnChart(document.getElementById('columnchart'));
          chart.draw(data, options);
        }
      </script>
    </head>
    <body onload="init()">
     <div id="columnchart"></div>

    </body>

看来，我在页面上有一个 div 和 'columnchart' id，并在他身上呈现图表。但是，我真正要做的是将 Chart 的动态数据集传递给 drawCharts() 函数以动态显示数据，类似这样：

  <script type="text/javascript" src="http://www.google.com/jsapi"></script>

  <script type="text/javascript">
    function init(data) {
      google.load("visualization", "1.1", {
        packages: ["corechart"],
        callback: 'drawCharts(data)'
      });
    }

    function drawCharts(obj) {
      var data = google.visualization.arrayToDataTable(obj);
      var options = {
        title: 'My Daily Activities',
      };
      var chart = new google.visualization.ColumnChart(document.getElementById('columnchart'));
      chart.draw(data, options);
    }
  </script>
</head>
<body onload="init({!! $arrayChart !!})">
  <div id="columnchart"></div>
</body>

无效。如何将参数传递给 google.load 回调？

Answer 1

一种方法是传递对回调函数的引用，而不是字符串，并将参数绑定到该引用：

callback: drawCharts.bind(null, data)

见Function.bind

或者，您可以创建一个新函数，调用您的原始函数，并将参数传递给它：

callback: () => drawCharts(data)

我可以将参数传递给 Google Charts Load 的回调函数吗？

Can I pass a parameter to a callback function of Google Charts Load?

javascript

google-visualization

laravel