0

我在动态呈现多个仪表的页面上使用http://www.highcharts.com/demo/gauge-speedometer 。仪表按其当前级别分组。我只希望在一行中最多显示 6 个仪表，并在新行上显示任何其他仪表。

仪表都工作正常。但是，如果有 7 个仪表的级别为“红色”，则它们正在从页面中流出。

我的视图返回一个“gauge_list”，它是每个仪表的字典列表，如下所示：

{'cnt': 48, 'yellow_to': 66, 'level': 'yellow', 'gauge_min': 0, 'gauge_link': 'gauges:contracts', 'green_to': 33, 'gauge_max': 100, 'gauge_title': 'contracts', 'gauge_name': 'Contracts'}

有关处理此问题的最佳方法的任何建议？

<div class="row">
    <div class="span12">
        <table>
        {% for gauge in gauge_list %}
            {% if gauge.level == "red" %}
                <td><div id="{{gauge.gauge_title}}" style="width: 280px; height: 210px; margin: 0 auto"></div></td>
            {% endif %}
        {% endfor %}
        </table>
    </div>
</div>
<div class="row">
    <div class="span12">
        <table>
        {% for gauge in gauge_list %}
            {% if gauge.level == 'yellow' %}
                <td><div id="{{gauge.gauge_title}}" style="width: 280px; height: 210px; margin: 0 auto"></div></td>
            {% endif %}
        {% endfor %}
        </table>
    </div>
</div>
<div class="row">
    <div class="span12">
        <table>
        {% for gauge in gauge_list %}
            {% if gauge.level == 'green' %}
                <td><div id="{{gauge.gauge_title}}" style="width: 280px; height: 210px; margin: 0 auto"></div></td>
            {% endif %}
        {% endfor %}
        </table>
    </div>
</div>
4

2 回答 2

1

我认为最简单的方法是 a) 确定视图中的分组列表或 b) 使用内置groupby模板标签。 groupby要求字典列表按分组键排列，分组键将在level此处。这最好在视图中完成，因为您可能不希望dictsort过滤器会给您提供简单的字母排序。

{% regroup gauge_list by level as level_list %}
    {% for level in level_list %}
        <div class="row">
        <div class="span12">
            <table>
              {% for gauge in level.list %}
                {% if forloop.counter0|divisibleby:"6" %}
                  {% if not forloop.first %}</tr>{% endif %}                    
                  <tr>
                {% endif %}
                <td><div id="{{gauge.gauge_title}}" style="width: 280px; height: 210px; margin: 0 auto"></div></td>
              {% endfor %}
              </tr>
            </table>
        </div>
        </div>
    {% endfor %}

通过在视图中执行此操作，我的意思是提供嵌套数据结构而不是简单列表。就像是：

levels_and_gauges = [['red', [...red guage dicts]],
                     ['yellow', [...yellow guage dicts]],
                     ['green'], [...green guage dicts]]]

模板代码将是这样的：

{% for level, guages in levels_and_guages %}
    <div class="row">
    <div class="span12">
        <table>
          {% for guage in guages %}
            {% if forloop.counter0|divisibleby:"6" %}
              {% if not forloop.first %}</tr>{% endif %}                    
              <tr>
            {% endif %}
            <td><div id="{{gauge.gauge_title}}" style="width: 280px; height: 210px; margin: 0 auto"></div></td>
           {% endfor %}
           </tr>
         </table>
    </div>
    </div>
{% endfor %}

或者您可以在视图而不是模板中分组为 6 行。

于 2013-09-25T22:12:26.787 回答
0 
{% for level in ["red", "yellow", "green"] %}
    <div class="row">
        <div class="span12">
            <table>
            {% for gauge in gauge_list %}
                {% if gauge.level == level %}
                    <td><div id="{{gauge.gauge_title}}" style="width: 280px; height: 210px; margin: 0 auto"></div></td>
                {% endif %}
            {% endfor %}
            </table>
        </div>
    </div>
{% endfor %}
于 2013-09-25T21:56:08.797 回答