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

我正在使用带有引导主题的Grails google可视化api插件，它运行良好，但我想以某种方式使其响应。有没有一种简单的方法可以通过插件或其他方法做到这一点？我粘贴了一个我正在处理的示例图表(.gsp 的完整内容(，它显示正常，但是当我调整屏幕大小时它不起作用。圣杯 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>

我不熟悉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>

相关内容

最新更新

热门标签：