Javascript 谷歌图表中的“表没有列”

我正在使用Java和JSF。我转换成JSON并传递给google.visualization.arrayToDataTable方法的对象是一个映射列表

List<Map<String, Object>> listOfMaps = new ArrayList<>();
Map<String, Object> map = new HashMap<>();
map.put("Name", "Value");
map.put("A", new Random().nextInt());
map.put("B", new Random().nextInt());
listOfMaps.add(map);
Gson gson = new Gson();
String arrayJson = gson.toJson(listOfMaps);
RequestContext.getCurrentInstance().execute("google.setOnLoadCallback(drawChart(" + arrayJson + "));");
RequestContext.getCurrentInstance().update("piechart");

HTML是：

<h:head>
    <title>Facelet Title</title>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
        //<![CDATA[
        google.load("visualization", "1", {packages:["corechart"]});
        function drawChart(mapList) {
            var gdata = google.visualization.arrayToDataTable(mapList);
            var options = {
                title: 'Teste'
            };
            var chart = new google.visualization.PieChart(document.getElementById('piechart'));
            chart.draw(gdata, options);
        }
        //]]>
    </script>
</h:head>
<h:body>
    <h:form>
        <p:growl id="growl" autoUpdate="true"  globalOnly="true" showDetail="true" sticky="true" />
        <p:commandButton id="button" value="test" action="#{testMB.test()}" />
        <br />
        <div id="piechart" style="width: 900px; height: 600px" />
    </h:form>
</h:body>

页面中错误的屏幕截图：

JavaScript控制台中没有显示任何内容

编辑：

---

将列表从映射更改为字符串[]后，将显示图表。当我发出JavaScript警报时，会打印数组长度，但不会打印值。

何时调用此JavaScript函数drawChartmapList？-如何调用它？它似乎从未被调用过。在函数中放置一些调试语句或只是一个警报框，以查看是否使用正确的mapList值调用了它。我提醒了地图列表的长度，但在打印值时它是空的。并且图表只显示一个名为Other的列。只有在我从映射列表更改为字符串数组列表之后。