Google 折线图未在 Google 地图信息窗口中显示 y 轴标签或图例标签

Question

我无法让图例标签和 y 轴标签显示在 google 折线图上。如果图表不在 google 地图信息窗口内，它工作正常，但一旦我将它放在信息窗口内，我就无法让标签出现在 y 轴和图例上。下面是我创建图表的函数：

function drawChart(marker, title, description) {

historySets = [{
    "windSpeed": 0,
    "windGust": 0,
    "pressure": 29.34000015258789,
    "time": "2021-04-14T09:48:00"
}, {
    "windSpeed": 0,
    "windGust": 5,
    "pressure": 29.329999923706055,
    "time": "2021-04-14T09:43:00"
}, {
    "windSpeed": 1,
    "windGust": 5,
    "pressure": 29.329999923706055,
    "time": "2021-04-14T09:38:00"
}, {
    "windSpeed": 2,
    "windGust": 4,
    "pressure": 29.329999923706055,
    "time": "2021-04-14T09:32:55"
}];
console.log(historySets);

// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn({
    type: 'datetime',
    id: 'time',
    label: 'Date'
});
data.addColumn({
    type: 'number',
    id: 'windSpeed',
    label: 'Wind Speed'
});
data.addColumn({
    type: 'number',
    id: 'windGust',
    label: 'Gust Speed'
});

var rows = [];

historySets.forEach(element => {
    var date = new Date(element.time);
    rows.push([date, element.windSpeed, element.windGust]);
});

data.addRows(rows);

var options = {
    title: 'Last 6 Hours',
    hAxis: {
        format: 'hh',
        gridlines: {
            count: 10
        }
    },
    legend: {
        position: 'bottom'
    },
};

var formatDate = new google.visualization.DateFormat({
    prefix: 'Time: ',
    pattern: "dd MMM HH:mm",
});

formatDate.format(data, 0);

var infoWindowNode = document.createElement('div'); // for info window
var chartnode = document.createElement('div'); // for chart
var textNode = document.createElement('div'); // for text
textNode.innerHTML = '<h4>' + title + '</h4>' + '<p>' + description + '</p>';

infoWindowNode.appendChild(textNode);

var infoWindow = new google.maps.InfoWindow();
var chart = new google.visualization.LineChart(chartnode);

infoWindowNode.appendChild(chartnode);

chart.draw(data, options);
infoWindow.setContent(infoWindowNode);
infoWindow.open(marker.getMap(), marker);
}

这是信息窗口中图表的当前输出。图例标签和 y 轴标签丢失。我已经尝试将大小设置为更大的宽度和高度，每个 1000，但我尝试过的所有方法都不会使标签出现。

Answer 1

如评论中所述。这是我在隐藏容器的情况下绘制图表的结果。幸运的是，有一个 domready 事件。更改我的函数以侦听 even 然后调用 chart.draw() 修复它。

infoWindow.setContent(infoWindowNode);
infoWindow.open(marker.getMap(), marker);

google.maps.event.addListener(infoWindow, 'domready', function () {
    chart.draw(data, options);
});

Google 折线图未在 Google 地图信息窗口中显示 y 轴标签或图例标签

Google Linechart not showing y-axis labels or legend labels inside of a Google Map InfoWindow

javascript

google-maps

google-visualization