Uncaught Error: Container Is Not Defined - Google Charts

Question

我正在尝试加载 google 图表并得到以下答案：

未捕获错误：容器未定义

我已经阅读了有关 Google 图表的此消息的其他问题，最常见的问题似乎是 getElementById 是否无法正常工作。

但是，我不认为这对我来说是个问题，或者至少对其他人来说不是问题。

这是我的 Google 图表代码：

google.load('visualization', '1.0', {'packages':['gauge']});

google.setOnLoadCallback(drawChart);

function drawChart() {
        var data = google.visualization.arrayToDataTable([
            ["Label", "Value"],
            ["Match", state.greens[0].score]
        ]);

        var options = {
            redFrom: 90, redTo: 100,
            yellowFrom: 75, yellowTo: 90,
            minorTicks: 5
        };

        var chart = new google.visualization.Gauge(document.getElementById("chart-div"));
        chart.draw(data, options);

        setInterval(function() {
            data.setValue(0, 1, 40 + Math.round(60 * Math.random()));
            chart.draw(data, options);
            }, 13000);
};

这几乎是空白 Google 在他们的仪表图表参考中的内容：https://developers.google.com/chart/interactive/docs/gallery/gauge

我实际上只是想使用他们文档中最直接的示例来生成包含我的数据的图表。

这是 html 我有：

<div class="row">
                <div class="col-md-6 col-md-offset-3">
                    <div class="chart-div">
                    </div>
                </div>
            </div>

我在一个单独的文件中有 javascript，并在我的 html 文件的头部加载 api。

我错过了什么？

Answer 1

document.getElementById("chart-div") 查找 id 设置为 chart-div 的元素。您的 div 使用 class 属性而不是 id 属性。将 <div class="chart-div"></div> 更改为 <div id="chart-div"></div>

或者，您可以执行 document.getElementsByClassName('chart-div')[0]，其中 0 是您想要的元素的序数。这种方式可能是首选，因为您可以 post 一个页面上的多个图表；但请注意，旧版浏览器（IE-9 之前）不支持 getElementsByClassName

Answer 2

连同上一个答案。您仍然可以将其保留为 class，但请执行以下操作：

document.querySelector(".chart-div");

或者如果您想获得更多支持：

var elems = document.layers || document.all || document.getElementsByTagName("*");
//          Netscape           < IE 6          All Other
for (var i = 0; i < elems.length; i += 1) {
    if (elems[i].className === 'chart-div') {
        // Do something with those elements
    }
}

我认为这与 Netscape 5 一样支持退缩，但请不要坚持这一点。

Uncaught Error: Container Is Not Defined - Google Charts

Uncaught Error: Container Is Not Defined - Google Charts

javascript

charts

google-visualization