使用ChartEditor调整Google可视化的大小

使用谷歌可视化ChartEditor时,是否可以设置图表的宽度和高度?

我要求图表为页面宽度的100%,然后设置高度(以像素为单位),当前我在忽略选项中设置宽度和高度时。

我到目前为止所使用的代码如下:

 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')); }  

该图表还包含一个与仪表板链接的CategoryFilter,用于处理显示的图表。

目前,当图表呈现时,它相当小。

这样的东西应该工作,我切换数据并修改滑块以使代码段工作。

  google.load("visualization", "1", { packages: ["corechart", "controls", "charteditor"] }); google.setOnLoadCallback(loadEditor); window.addEventListener('resize', redrawChart, false); var chartEditor; var data; var dashboard; var rangeSlider; var wrapper; function loadEditor() { data = google.visualization.arrayToDataTable([ ['Element', 'Density'], ['Copper', 8.94], ['Silver', 10.49], ['Gold', 19.30], ['Platinum', 21.45] ]); dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div')); rangeSlider = new google.visualization.ControlWrapper({ 'controlType': 'CategoryFilter', 'containerId': 'filter_div', 'options': { 'filterColumnLabel': 'Density', 'ui': { 'label': 'Density' } } }); wrapper = new google.visualization.ChartWrapper({ chartType: 'ColumnChart', containerId: 'chart_div', dataTable: data }); chartEditor = new google.visualization.ChartEditor(); google.visualization.events.addListener(chartEditor, 'ok', drawChart); chartEditor.openDialog(wrapper, {}); } function drawChart() { wrapper = chartEditor.getChartWrapper(); redrawChart(); } function redrawChart() { var height; var width; height = '200px'; width = Math.min(document.documentElement.clientWidth, window.innerWidth || 0) + 'px'; wrapper.setOption('height', height); wrapper.setOption('width', width); dashboard.bind(rangeSlider, wrapper); dashboard.draw(data); }