Question

我试图加载谷歌图表并得到以下答案：

未捕获错误：未定义容器

我已经阅读了有关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在其Gauge图表参考中的含义相同：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放在一个单独的文件中，并将api加载到我的html文件的头部。

我错过了什么？

Answer 1

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

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

不支持getElementsByClassName

Answer 2

与之前的答案一起。你仍然可以保持一个班级但是：

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一样支持但不支持我。

未捕获错误：未定义容器 - Google图表

2 个答案: