Javascript 使用ChartEditor调整google可视化的大小

使用谷歌可视化图表编辑器时，是否可以设置图表的宽度和高度

我要求图表的宽度为页面宽度的100%，然后设置高度（以像素为单位），当前，当我在选项中设置宽度和高度时，它们将被忽略

到目前为止，我所研究的代码如下：

<script type="text/javascript">

        google.load("visualization", "1", { packages: ["corechart", "controls", "charteditor"] });

        google.setOnLoadCallback(loadEditor);
        var chartEditor = null;

        window.onresize = function() {
            loadEditor();
        };

        function loadEditor() {

            var data = google.visualization.arrayToDataTable([@Html.Raw(@ViewBag.ChartData)]);

            var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div'));

            var rangeSlider = new google.visualization.ControlWrapper({
                'controlType': 'CategoryFilter',
                'containerId': 'filter_div',
                'options': {
                    'filterColumnLabel': 'VAR1',
                    'ui': {
                        'label': 'Years'
                    }
                }
            });
            var wrapper = new google.visualization.ChartWrapper({
                chartType: 'ColumnChart',
                containerId: 'chart_div',
                dataTable: data
            });
            chartEditor = new google.visualization.ChartEditor();
            google.visualization.events.addListener(chartEditor, 'ok', redrawChart);
            chartEditor.openDialog(wrapper, {});
            dashboard.bind(rangeSlider, wrapper);
            dashboard.draw(data);
        }

        function redrawChart() {
            chartEditor.getChartWrapper().draw(document.getElementById('chart_div'));

        }
    </script>

load（“可视化”、“1”、{packages:[“corechart”、“控件”、“图表编辑器”]}）；
setOnLoadCallback（loadEditor）；
var chartreditor=null；
window.onresize=函数（）{
loadEditor（）；
};
函数loadEditor（）{
var data=google.visualization.arrayToDataTable（[@Html.Raw（@ViewBag.ChartData）]；
var dashboard=newgoogle.visualization.dashboard（document.getElementById（'dashboard_div'））；
var rangeSlider=new google.visualization.ControlWrapper({
“controlType”：“CategoryFilter”，
“containerId”：“filter_div”，
“选项”：{
“filterColumnLabel”：“VAR1”，
“用户界面”：{
“标签”：“年”
}
}
});
var wrapper=new google.visualization.ChartWrapper({
chartType:“ColumnChart”，
集装箱船：“海图分区”，
数据表：数据
});
chartEditor=新的google.visualization.chartEditor（）；
google.visualization.events.addListener（图表编辑器'ok'，重画图表）；
openDialog（包装，{}）；
dashboard.bind（范围滑块、包装器）；
仪表盘.绘图（数据）；
}
函数重绘图表（）{
getChartWrapper（）.draw（document.getElementById（'chart_div'））；
}

该图表还包含一个与仪表板链接的类别过滤器，用于处理显示的图表

---

当前，当图表呈现时，它相当小

像这样的东西应该可以工作，我关闭了数据并修改了滑块，以使代码段正常工作

google.load（“可视化”、“1”、{packages:[“corechart”、“控件”、“图表编辑器”]}）；
setOnLoadCallback（loadEditor）；
window.addEventListener（'resize'，重画图表，false）；
var图表编辑器；
var数据；
var仪表盘；
变量范围滑块；
var包装器；
函数loadEditor（）{
data=google.visualization.arrayToDataTable([
[‘元素’、‘密度’]，
[cuper'，8.94]，
[Silver'，10.49]，
[Gold'，19.30]，
[‘白金’，21.45]
]);
dashboard=新的google.visualization.dashboard（document.getElementById（'dashboard_div'））；
RangeSloider=新的google.visualization.ControlWrapper({
“controlType”：“CategoryFilter”，
“containerId”：“filter_div”，
“选项”：{
“filterColumnLabel”：“密度”，
“用户界面”：{
“标签”：“密度”
}
}
});
wrapper=新的google.visualization.ChartWrapper({
chartType:“ColumnChart”，
集装箱船：“海图分区”，
数据表：数据
});
chartEditor=新的google.visualization.chartEditor（）；
google.visualization.events.addListener（图表编辑器'ok'，drawChart）；
openDialog（包装，{}）；
}
函数绘图图（）{
wrapper=chartEditor.getChartWrapper（）；
重画图表（）；
}
函数重绘图表（）{
变异高度；
var宽度；
高度='200px'；
宽度=Math.min（document.documentElement.clientWidth，window.innerWidth | | 0）+“px”；
wrapper.setOption（'height'，height）；
wrapper.setOption（'width'，width）；
dashboard.bind（范围滑块、包装器）；
仪表盘.绘图（数据）；
}