Question

我正在使用带有引导主题的Grails google visual 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>

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

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

1 个答案: