标签：javascript jquery charts google-visualization

使用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,用于处理显示的图表.

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

解决方法:

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

        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>

标签：javascript,jquery,charts,google-visualization
来源： https://codeday.me/bug/20190928/1825979.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。