时间戳

首页 > 解决方案 > 如何让谷歌仪表从其上方的函数创建的输入标签中读取数据

javascript - 如何让谷歌仪表从其上方的函数创建的输入标签中读取数据

问题描述

我使用 , 从 function1() 创建了一个输入标签，并使用,inputRowInputField = document.createElement('input')分配了一个 ID 和值。我正在尝试通过下面在 function3() 中定义的谷歌仪表读取上面分配的值。我也是从 function2()创建的inputRowInputField.id = "input_1"inputRowInputField.value = 10chart_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

标签： javascripthtmldomgoogle-visualization

解决方案

首先，您使用的是旧版本的谷歌图表。
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);
});

推荐阅读