javascript - Google Chart 不是 div 宽度的 100% - 包含从代理表重绘图表的事件监听器

Question

我已经实现了这篇文章中@WhiteHat的建议Google Chart not taking up 100% of space

我的<div>宽度为 100%，但我的图表仍然仅呈现 400 像素宽。参见图片。

我设置了以下图表选项。

        "chartType": "ComboChart",
        "containerId": "chartnull_G3G",   
        "view": {"columns":[2,3]}, 
        "options": {
           "chartArea": { "left": "auto", "right": "auto", "top": 50, "bottom": "auto", "width": "80%", "height": "60%", "backgroundColor": "white" },
           "width": "100%",
           "height": 500    
         }

我的程序流程包含以下步骤。

//proxyTable_default and comboChart_default simply creates the content for the chart - this works without problem

var proxyTable = new google.visualization.ChartWrapper(proxyTable_default(element_suffix));
var chart = new google.visualization.ChartWrapper(comboChart_default(null, element_suffix, json.comboChart.options));

addListenersComboChart();

window.addEventListener('resize', function () { proxyTable.draw(); }, false);

proxyTable.setDataTable(proxyView)
proxyTable.draw();

这是上面引用的我的监听器和重绘函数。

function addListenersComboChart() {
    google.visualization.events.addListener(proxyTable, 'ready', function () {
        redrawComboChart(element_suffix, json.comboChart);
    });
}

function redrawComboChart(element_suffix, comboChart) {
    //Do many steps to calculate the finalView_forChart - this works without problem
    chart.setDataTable(finalView_forChart);
    chart.draw();
}

我无法发布完整的代码库，因为它有 1000 多行长。一切正常，直到图表未绘制 100% 宽。我错过了什么？

一如既往，我很感谢您的反馈。

Answer 1

@Whitehat 是正确的。 div 一直隐藏，直到调用 .draw() 为止。 lib_loadingStatus() 取消隐藏 div

之前

proxyTable.setDataTable(proxyView);
proxyTable.draw();    
lib_loadingStatus(element_suffix, "done"); //This code unhides the chart <div>

之后

proxyTable.setDataTable(proxyView);    
lib_loadingStatus(element_suffix, "done"); //This code unhides the chart <div>    
proxyTable.draw();
  

图表现在绘制完整尺寸。非常感谢@WhiteHat(再次拯救了这一天!)