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 に答える