使用 Grails Google Visualization API 插件创建响应式图表？答案

【问题标题】：Creating a responsive Chart with the Grails Google Visualization API Plugin?使用 Grails Google Visualization API 插件创建响应式图表？
【发布时间】：2016-05-18 20:31:10
【问题描述】：

我正在使用带有引导主题的 Grails google 可视化 api 插件，它工作得很好，但我想让它以某种方式响应。有没有一种简单的方法可以通过插件或其他方法来做到这一点？我粘贴了一个示例图表（.gsp 的完整内容），我正在处理它显示正常，但是当我调整屏幕大小时它不起作用。 Grails 2.5.2 谢谢！！

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>



</head>
<body>


<gvisualization:columnCoreChart elementId="barchart"
                                hAxis="${[slantedTextAngle: '180', textStyle: [color: 'black', fontName: 'Arial', fontSize: 10]]}"
                                bar="${[groupWidth: '50%']}"
                                title="Sales per Month"
                                titleTextStyle="${[color: 'black', fontName: 'Arial', fontSize: 14]}"
                                legend="${[position: 'bottom']}"
                                isStacked="${false}"
                                height="${400}"
                                columns="${colData}" data="${chartData}"/>

<div id="barchart"></div>

</body>
</html>

【问题讨论】：

您需要监听resize 事件并相应地“重绘”图表——参见redrawChart here 示例
是否需要按照示例将 gvisualization 标签设置为等于函数？

标签： twitter-bootstrap grails google-visualization grails-plugin responsiveness

【解决方案1】：

我不熟悉grails，这可能有帮助。

首先，给图表命名，您可以使用它来访问 JavaScript 中的图表变量。
我认为默认是visualization。

为ready 事件添加一个处理程序，并在触发时激活resize 侦听器。

然后您可以确定图表的大小，然后重新绘制图表。

但这就是我迷路的地方。
为了重绘图表，您需要图表data 和options。

<!DOCTYPE html>
<html>
<head>
  <script src="https://www.google.com/jsapi"></script>
  <script>

    function readyHandler() {
      window.addEventListener('resize', redrawChart, false);
    }

    function redrawChart() {
      var chartHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0) + 'px'
      var chartWidth = Math.max(document.documentElement.clientWidth, window.innerWidth || 0) + 'px';

      // rebuild options or access hAxis and others from tag
      var options = {
        height: chartHeight,
        width: chartWidth,
        hAxis: {
          slantedTextAngle: '180',
          // rest of options
        }
      };

      // build data
      var arrData = [];
      arrData.push(${colData});    // ??
      arrData.push(${chartData});  // ??

      var data = new google.visualization.DataTable(arrData);

      // redraw named chart
      gvisBarChart.draw(data, options);
    }

  </script>
</head>
<body>
  <gvisualization:columnCoreChart name="gvisBarChart"
                                  elementId="barchart"
                                  hAxis="${[slantedTextAngle: '180', textStyle: [color: 'black', fontName: 'Arial', fontSize: 10]]}"
                                  bar="${[groupWidth: '50%']}"
                                  title="Sales per Month"
                                  titleTextStyle="${[color: 'black', fontName: 'Arial', fontSize: 14]}"
                                  legend="${[position: 'bottom']}"
                                  isStacked="${false}"
                                  height="${400}"
                                  ready="readyHandler"
                                  columns="${colData}" data="${chartData}"/>
  <div id="barchart"></div>
</body>
</html>

【讨论】：

返回工作并尝试看看我是否可以使用它来解决问题。谢谢！