1

Bootstrap の Carouselを使用して、多数のHighchartsウィジェットを表示するダッシュボードを作成しています。私はそれをうまく実装したので、1 つのグラフが表示され、一度に 2 つのウィジェットを表示するために少し「チャンク」ロジックを使用しました。これはすべてうまく機能しますが、次のことを強化したいと思います。

  1. ユーザーの画面サイズが 2 つのグラフに収まる十分な大きさの場合は、2 つのグラフを表示し、2 つずつページ分割します。
  2. ユーザーの画面サイズが小さく、グラフが 1 つしか収まらない場合は、1 を表示し、1 ずつ改ページします。
  3. ユーザーの画面サイズが 2 未満であるが 1 より大きい場合、1.5 のグラフを表示し、1 ずつ改ページします。

AngularJS を使用して HTML を作成しています。#1 と #2 を個別のテンプレート ブロックで実行し、画面サイズに基づいて表示/非表示にするのは簡単です。しかし、私は＃3に少し困惑しています。2 つのグラフを表示する方法がわかりませんが、ページネーションは 1 つだけです。

4

1 に答える 1

0

これを行うために、最終的に次の JavaScript を作成しました。基本的に、2 つの異なるセクション (クラス .oneup と .twoup) をレンダリングし、.oneup が表示される場合は「プレビュー」を追加します。

<script type="text/javascript">
var chartBar = $('#chart-bar');

function chartPreview(firstChart) {
    var chartBarWidth = chartBar.width();
    if (chartBarWidth > 600) {
        var currentChart = $('.carousel-inner:visible .active');
        // append the next widget to the current item
        var chartToCheck = (firstChart) ? currentChart : currentChart.next();

        if (chartToCheck.next()) {
            chartToCheck.next().find('.widget').clone().appendTo(chartToCheck);
            $('.carousel-inner').css({'margin-left': '10px', 'width': '98.8%'})
        }
    } else if (chartBarWidth > 1040) {
        $('.carousel-inner').css({'margin-left': '0', 'width': '100%'})
    }
}
$(document).ready(function() {
    $('.widgets').sortable({
        cursor: "move",
        handle: ".heading"
    }).disableSelection();
    $('.boxes,.tasks').sortable();

    var carousel = $('.carousel');
    $(carousel).carousel({
        interval: 0
    });

    if (chartBar.width() < 1040) {
        chartBar.find('.oneup').show();
        chartPreview(true);

        carousel.bind('slide', function() {
            chartPreview(false);
        });
    } else {
        chartBar.find('.twoup').show();
    }
});

oneup と twoup の両方をレンダリングする必要がなければいいのですが、AngularJS でそれを行う方法がわかりません。これが私のoneup ng-repeatです：

<div class="carousel-inner">
    <div class="item chart"
         ng-repeat="widget in widgets | filter: {type: 'chart'} | orderBy: 'order'"
         ng-class="{active: $index == 0}">
        <chart class="widget" value="{{widget}}" type="{{widget.chartType}}"></chart>
    </div>
</div>

twoup ng-repeat との比較:

<div class="carousel-inner">
    <div class="item chart"
         ng-repeat="widget in widgets | filter: {type: 'chart'} | chunk: 2 | orderBy: 'order'"
         ng-class="{active: $index == 0}">
        <chart class="widget" value="{{widget[0]}}" type="{{widget[0].chartType}}"></chart>
        <chart class="widget" value="{{widget[1]}}" type="{{widget[1].chartType}}"></chart>
    </div>
</div>
于 2013-02-13T20:05:04.073 に答える