使用ChartEditor调整Google可视化 [英] Resizing google visualization with ChartEditor

问题描述

是否可以在使用Google可视化ChartEditor时设置图表的宽度和高度？

我需要图表为页面宽度的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> 
 

图表还包含与仪表板链接的CategoryFilter，用于显示图表。 p>



当前绘制图表时，它相当小。

解决方案

这样应该可以工作，我切换了数据并修改了滑块以使代码段正常工作。 >



  google.load（visualization，1，{packages：[corechart，controls，charteditor]}）; google.setOnLoadCallback（loadEditor）; window.addEventListener（'resize'，redrawChart，false）; var chartEditor; var数据; var dashboard; var rangeSlider; var wrapper;函数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）; }  

 < script src =https： .google.com / jsapi>< / script>< div id =dashboard_div> < div id =filter_div>< / div> < div id =chart_div< / div>< / div>  

is it possible to set the width and height of a chart when using the google visualization ChartEditor?

I require the chart to be 100% the width of the page and then set the height in pixels, currently when I set the width and height in the options they are being ignored.

the code that I have worked on so far is below:

<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>

the chart also incorporates a CategoryFilter linked with a dashboard is required to work with the chart displayed.

Currently when the chart is rendered it is fairly small.

解决方案

Something like this should work, I switched out the data and modified the slider to get the snippet to work.

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

<script src="https://www.google.com/jsapi"></script>

<div id="dashboard_div">
  <div id="filter_div"></div>
  <div id="chart_div"></div>
</div>

这篇关于使用ChartEditor调整Google可视化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！