1

我正在使用Bootstrap 的 Carousel创建一个显示一堆Highcharts小部件的仪表板。我已经成功实现了它，因此显示了 1 个图表并使用了一些“分块”逻辑一次显示 2 个小部件。这一切都很好，但我想增强一些东西：

  1. 如果用户的屏幕尺寸足以容纳 2 个图表，则显示 2 个图表并按 2 分页。
  2. 如果用户的屏幕尺寸很小，只适合 1 个图表，则显示 1 并按 1 分页。
  3. 如果用户的屏幕尺寸 < 2 up，但 > 1，则显示 1.5 个图表并按 1 分页。

我正在使用 AngularJS 来构建 HTML。在单独的模板块中执行 #1 和 #2 很容易，然后根据屏幕大小显示/隐藏。但是，我对#3 有点困惑。我不知道如何显示 2 个图表，但只能分页 1。

4

1 回答 1

0

我最终编写了以下 JavaScript 来执行此操作。基本上，我正在渲染两个不同的部分（使用 .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 来做到这一点。这是我的一个 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 回答