4

有人可以建议一种将参数（数据）从超链接（id =“inline”）传递到以下谷歌图表的方法。现在我在函数中有硬编码数据。另外我还想在aj 查询 fancybox（已经完成）..拜托！！寻找一些建议

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
      <script type="text/javascript" src="http://www.google.com/jsapi"></script>
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
      <script type="text/javascript" src="http://fancybox.net/js/fancybox-1.3.4/jquery.fancybox-1.3.4.js"></script>
      <link rel="stylesheet" href="http://fancybox.net/js/fancybox-1.3.4/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />

      <script type="text/javascript">
          google.load('visualization', '1', {packages: ['columnchart']});
      </script>


      <script>

      function drawVisualization() {
         var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses'],
          ['2004',  1000,      400],

        ]);
         var options = {
          title: 'Company Performance',
          hAxis: {title: 'Year', titleTextStyle: {color: 'red'}}
        };
        // Create and draw the visualization.
        new google.visualization.ColumnChart(document.getElementById('data')).draw(data, options);
      }


      $(document).ready(function() {
        $("a#inline").fancybox({
          'hideOnContentClick': true,
          onComplete: drawVisualization
        });
      });

      </script>
    </head>


    <body>
      <a id="inline" href="#data">Show Chart</a>
      <div style="display:none"><div style='height:400px;width:600px' id="data"></div></div>
    </body>
  </html>
4

3 回答 3

2

它即将变得丑陋......阅读风险自负！
说真的，这不是一个特别优雅的解决方案，但它可能对您有用（根据您的具体要求，在撰写本文时我还不是很清楚）。

您可以在要显示图表并在其中存储一些序列化数据的每个元素中使用自定义 data-* 属性（我们称之为）。 （为了我的说明，我使用了一个简单的方案：用 分隔表格行，用分隔单元格数据。）data-chart-data<a>
|,

<a href="#data" class="chartLink" 
        data-chart-data='"Year","Sales","Expenses"|"2004",1000,400'>
    Show Chart
</a>

然后，在 JS 部分，您需要将图表数据作为参数传递给drawVisualization()函数。

访问图表数据（使用 HTML5）：aElem.dataset.chartData
访问图表数据（非 HTML5）：aElem.getAttribute("data-chart-data")

不幸的是，您需要一些自定义函数来将图表数据从字符串表示形式转换为 JS 数组。这是我的示例函数，它需要整数类型的值（任何未包含在 中"）和字符串（任何包含在 中"）：

function strToArr(str) {
    var arr = [];
    var rows = str.split("|");
    for (var i = 0; i < rows.length; i++) {
        var row = [];
        var regex = new RegExp("^\"(.*)\"$");
        var values = rows[i].split(",");
        for (var j = 0; j < values.length; j++) {
            var value = values[j].trim();
            row.push(regex.test(value) 
                    ? RegExp.$1 
                    : parseInt(value, 10));
        }
        arr.push(row);
    }
    return arr;
}

当然，您应该修改此功能以满足您的需要。
以类似的方式，您可以序列化“选项”并将它们作为参数传递给drawVisualization()。

另请参阅这个简短的演示。

于 2013-05-19T12:35:28.073 回答
1

有三种解决方案：从用户那里获取数据，从服务器端脚本生成数据和可视化，或者在脚本加载后通过 ajax 获取数据。

  • 来自用户。向页面添加表单。使用 javascript 事件，当用户输入他们的数据时，您可以处理它并刷新可视化。

  • 从服务器。使用服务器端语言，例如 PHP 或 ASP.net，从它所在的位置获取数据 - 外部源、数据库......服务器将获取数据，然后在 Google 图表期望的数组列表中重新格式化它.

  • 通过阿贾克斯。您仍然需要一个服务器端脚本来获取数据所在的位置，但是 ajax 会带来更大的灵活性。客户端脚本从服务器请求数据。当服务器将其发回时，回调函数会从图表开始。

于 2013-05-19T08:20:01.680 回答
1

由于 Now Bootstrap 是一个流行的前端开发框架，它们以漂亮的模态提供了一个弹出窗口操作。以下将是我的问题的最佳解决方案（我所期望的）。我发布这个答案是因为其他人可以清楚地了解上述问题的解决方案。干杯！:)

包含相关的 CDN

 <script type="text/javascript" src="https://www.google.com/jsapi"></script>
 <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> 
 <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
 <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap-theme.min.css">
 <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>

谷歌可视化图表脚本

<script>
    google.load("visualization", "1", {packages:["corechart"]});
    google.setOnLoadCallback(drawVisualization);
    function drawVisualization(year,value1,value2) {
         var data = google.visualization.arrayToDataTable([
              ['Year', 'Sales', 'Expenses'],[year,value1,value2],]);
             var options = {title: 'Company Performance',hAxis: {title:'Year',titleTextStyle:color: 'red'}}};

new google.visualization.ColumnChart(document.getElementById('chart_div')).draw(data, options);
          }
    </script>

引导要点 

    <body>
<h1>POP UP Google Chart Using Bootstrap </h1>
<button class="btn btn-primary btn-lg" onclick="drawVisualization('2004',50,35)" data-toggle="modal" data-target="#myModal">
  Launch Google Chart
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Pop Up</h4>
      </div>
      <div class="modal-body">
        <div id="chart_div" style="width: 900px; height: 500px;"></div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

</body>
于 2014-02-11T10:56:49.940 回答