Google 图表不显示 x 和 y 图例

Question

所以...我的问题是 google 图表未显示底部图例和 vAxis 值。

它应该有，例如，在左边的红色框中，值 100、200、300...

底部应该写有（橙色框）“太阳能”和（红线）“太阳能消耗”。

我在jsPDF插件上打印，所以它是一个隐藏的容器，我无法在屏幕上显示它

html:

<div id="chart_div" style="display: none;"></div>

js:

google.charts.load('current', {
    packages: ['corechart', 'controls']
}).then(function () {
    var dataChart1 = new google.visualization.DataTable();
    dataChart1.addColumn('string', 'Mês');
    dataChart1.addColumn('number', 'Fora Ponta');
    dataChart1.addColumn('number', 'Geração Solar');
    dataChart1.addRows([
        ['JAN', 0, 0],
        ['FEV', 1, 1],
        ['MAR', 2, 2],
        ['ABR', 3, 3],
        ['MAI', 4, 4],
        ['JUN', 5, 5],
        ['JUL', 6, 6],
        ['AGO', 7, 7],
        ['SET', 8, 8],
        ['OUT', 9, 9],
        ['NOV', 10, 10],
        ['DEZ', 11, 11]
    ]);

    var optionsChart1 = {
        titlePosition: 'none',
        vAxis: {title: 'Valores'},
        hAxis: {
            format: 'decimal'
        },
        legend: {
            position: "bottom"
        },
        seriesType: 'bars',
        series: { 1: { type: 'line' } },
        height: 300,
        width: 800,
        colors: ['orange', 'red']
    };

    chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
    chart.draw(dataChart1, optionsChart1);
});

Answer 1

经过几次测试，我设法解决了删除问题：

display:none;

来自我的图表 div 并添加：

position: absolute;z-index: -1;

所以不会出现在屏幕上，也避免了因为隐藏内容而无法正确显示图例的bug。

Google 图表不显示 x 和 y 图例

Google chart not display x and y legend

html

javascript

google-visualization