Twitter bootstrap 使用Grails Google Visualization API插件创建响应图表？_Twitter Bootstrap_Grails_Google Visualization_Grails Plugin_Responsiveness

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

twitter-bootstrap grails google-visualization

Twitter bootstrap 使用Grails Google Visualization API插件创建响应图表？,twitter-bootstrap,grails,google-visualization,grails-plugin,responsiveness,Twitter Bootstrap,Grails,Google Visualization,Grails Plugin,Responsiveness,我正在使用Grails google visualization api插件，该插件带有一个引导主题，它工作得很好，但我想让它以某种方式响应。有没有一种简单的方法可以通过插件或其他方法实现这一点？我粘贴了一个示例图表（完整的.gsp内容），它显示得很好，但当我调整屏幕大小时，它不起作用。Grails2.5.2谢谢 <!DOCTYPE html> <html> <head> <script type="text/javascript" src="h

我正在使用Grails google visualization api插件，该插件带有一个引导主题，它工作得很好，但我想让它以某种方式响应。有没有一种简单的方法可以通过插件或其他方法实现这一点？我粘贴了一个示例图表（完整的.gsp内容），它显示得很好，但当我调整屏幕大小时，它不起作用。Grails2.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中的图表变量。
我认为默认设置是

可视化

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

为

ready

事件添加一个处理程序，并在触发时激活

resize

侦听器

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

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

数据

和

选项

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


函数readyHandler（）{
window.addEventListener（'resize'，重画图表，false）；
}
函数重绘图表（）{
var chartHeight=Math.max（document.documentElement.clientHeight，window.innerHeight | | 0）+“px”
var chartWidth=Math.max（document.documentElement.clientWidth，window.innerWidth | | 0）+“px”；
//重建选项或从标签访问hAxis和其他
变量选项={
高度：图表高度，
宽度：图表宽度，
哈克斯：{
倾斜角度：“180”，
//其他选择
}
};
//构建数据
var-arrData=[]；
arrData.push（${colData}）；/？？
arrData.push（${chartData}）；/？？
var data=新的google.visualization.DataTable（arrData）；
//重画命名图表
gvisBarChart.draw（数据、选项）；
}

我不熟悉

grails

，这可能会有所帮助

首先，给图表一个名称，您可以使用该名称访问JavaScript中的图表变量。
我认为默认设置是

可视化

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

为

ready

事件添加一个处理程序，并在触发时激活

resize

侦听器

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

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

数据

和

选项

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


函数readyHandler（）{
window.addEventListener（'resize'，重画图表，false）；
}
函数重绘图表（）{
var chartHeight=Math.max（document.documentElement.clientHeight，window.innerHeight | | 0）+“px”
var chartWidth=Math.max（document.documentElement.clientWidth，window.innerWidth | | 0）+“px”；
//重建选项或从标签访问hAxis和其他
变量选项={
高度：图表高度，
宽度：图表宽度，
哈克斯：{
倾斜角度：“180”，
//其他选择
}
};
//构建数据
var-arrData=[]；
arrData.push（${colData}）；/？？
arrData.push（${chartData}）；/？？
var data=新的google.visualization.DataTable（arrData）；
//重画命名图表
gvisBarChart.draw（数据、选项）；
}

您需要监听

resize

事件并相应地“重画”图表——参见

redrawChart

示例我是否需要按照示例将gvisualization标记设置为函数？您需要监听

resize

事件并相应地“重画”图表——参见

redrawChart

例如，我是否需要按照示例将gvisualization标记设置为等于一个函数？返回到处理它并尝试查看是否可以使用它来解决问题。谢谢回到工作中，试着看看我是否能用这个来解决它。谢谢