如何使Google仪表从其上方的函数创建的输入标签读取数据

Question

我已经使用inputRowInputField = document.createElement('input')从function1（）创建了一个Input标签，并使用inputRowInputField.id = "input_1" ， inputRowInputField.value = 10分配了ID和值。 我正在尝试通过在function3（）中定义的Google仪表读取上面分配的值，如下所示。 我也从function2（）创建chart_div

function drawChart() {
        var data = google.visualization.arrayToDataTable([
            ['Label', 'Value'],
            ['Test', Number(document.getElementById("input_1").value)]
        ]);
        var options = {
            max: 100,
            min: 0,
            height: 110,
            yellowFrom: 80,
            yellowTo: 90,
            greenFrom: 90,
            greenTo: 100,
            minorTicks: 2
        };
        var chart = new google.visualization.Gauge(document.getElementById('chart_div');
        chart.draw(data, options);

我在下面调用函数

function1()
function2()
google.load('visualization', '1', {
        packages: ['gauge']
    });
google.setOnLoadCallback(function3());

调用function3（）时收到错误消息： Uncaught TypeError: Cannot read property 'arrayToDataTable' of undefined

Answer 1

首先，您使用的是旧版的Google图表。
不再使用jsapi ，请参阅更新库加载器代码 。

去掉...

<script src="https://www.google.com/jsapi"></script>

加...

<script src="https://www.gstatic.com/charts/loader.js"></script>

这只会更改有问题的两条语句...

现在，对于这个问题...

setOnLoadCallback引用了一个函数...

function3

不是功能的结果...

function3()

改成...

google.charts.load('current', {
  packages: ['gauge']
});
google.charts.setOnLoadCallback(function3);

---

如果您需要将参数传递给回调函数，
将其包装在另一个函数中...

google.charts.setOnLoadCallback(function () {
  function3(arg1, arg2);
});