Question

我有一个使用带有多个CategoryFilters的GoogleCharts API创建的表格，如下所示。

过滤掉数据后，我想检索每个过滤器中的所有值。

当前页面的网址为home/。因此，如果我点击NEXT button，我想导航到下一页home/GT/ALL/ALL/ALL/ALL/。

现在我很困惑如何检索每个过滤器中的值并将其写在href中。

<div class="btn-group">
    <button class="button" href="#">NEXT</button> <!--how to get the value from each filter and pass them on the href?-->
</div>

任何建议都将不胜感激。感谢。

已更新

我试图简化我的问题。所以我在/home/页面。该页面如下所示。

我从过滤器中选择一个值，例如我选择了A。

然后，如果我点击NEXT按钮，则会转到带有网址/home/A的下一页。

HTML看起来像这样。

<html>
<head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">

      google.charts.load('current', {'packages':['table', 'controls']});

      google.charts.setOnLoadCallback(createTableWithFilter);

      function createTableWithFilter() {

        var data = google.visualization.arrayToDataTable([
                    ['Type', 'Value'],
                    ['A', 1],
                    ['A', 2],
                    ['B', 1],
                    ['B', 2]
                    ]);

        var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div'));

        var categoryFilter = new google.visualization.ControlWrapper({
             'controlType': 'CategoryFilter',
             'containerId': 'filter_div',
             'options': {
                 'filterColumnLabel': 'Type'
             }
        });

        var table = new google.visualization.ChartWrapper({
            'chartType': 'Table',
            'containerId': 'table_div',
        });


        dashboard.bind(categoryFilter, table);
        dashboard.draw(data);

      }

    </script>

    <style>
        .btn-group .button {
            background-color: #008CBA;
            color: white;
            padding: 7px 16px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 12px;
            cursor: pointer;
            float: left;
        }
        .btn-group .button:not(:last-child) {
            border-right: none; /* Prevent double borders */
        }
        .btn-group .button:hover {
            background-color: #195389;
        }

    </style>

</head>

<body>
    <!--Div that will hold the dashboard-->
    <div id="dashboard_div">
        <!--Divs that will hold each control and chart-->
        <div id="filter_div"></div>
        <div id="table_div"></div>
    </div>
    <div class="btn-group">
        <button class="button" href="#">NEXT PAGE</button>
    </div>
</body>
</html>

这是我的Python代码：

from flask import Flask, flash, redirect, render_template, request, session, abort
import os

tmpl_dir = 'templates'
app = Flask(__name__, template_folder=tmpl_dir)


@app.route("/")
def index():    
    return render_template('example_get_value_from_categoryfilter.html')      

if __name__ == "__main__":
    app.run()

如何从CategoryFilter中的所选选项中获取值A并将其传递给按钮中的href？

Answer 1

每个过滤器都有state属性

使用getState()方法检索过滤器的selectedValues ...

selectedValues将是一个包含一个或多个选定值的数组

categoryFilter.getState().selectedValues

使用jquery，您可以使用类似......

的内容更新href

if (categoryFilter.getState().selectedValues.length > 0) {
  $('.button').attr('href', categoryFilter.getState().selectedValues[0]);
}

编辑

您还需要使用'statechange'事件来了解过滤器何时发生

请参阅以下工作代码段...

google.charts.load('current', {
  callback: function () {
    createTableWithFilter();
    window.addEventListener('resize', createTableWithFilter, false);
  },
  packages: ['table', 'controls']
});

function createTableWithFilter() {
  var data = google.visualization.arrayToDataTable([
    ['Type', 'Value'],
    ['A', 1],
    ['A', 2],
    ['B', 1],
    ['B', 2]
  ]);

  var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div'));

  var categoryFilter = new google.visualization.ControlWrapper({
    'controlType': 'CategoryFilter',
    'containerId': 'filter_div',
    'options': {
      'filterColumnLabel': 'Type'
    }
  });

  google.visualization.events.addListener(categoryFilter, 'statechange', function () {
    var urlAddr = '/home';

    categoryFilter.getState().selectedValues.forEach(function (filterValue) {
      urlAddr += '/' + filterValue;
    });
    $('.button').attr('href', urlAddr);

    console.log($('.button').attr('href'));
  });

  var table = new google.visualization.ChartWrapper({
    'chartType': 'Table',
    'containerId': 'table_div',
  });

  dashboard.bind(categoryFilter, table);
  dashboard.draw(data);
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div id="dashboard_div">
  <div id="filter_div"></div>
  <div id="chart_div"></div>
  <div id="table_div"></div>
</div>
<div class="btn-group">
  <a class="button" href="#">NEXT</a> <!--how to get the value from each filter and pass them on the href?-->
</div>

Python - Flask - Google Charts API获取每个CategoryFilter中的值并将其传递给href

1 个答案: