Question

我正在尝试创建一个以天，周和月显示的图表。我已经做了几天的图表并且想知道如何使用切换按钮，这样当我点击几周时，我可以放置另一个图表数星期。

<div class="actions">
    <div class="btn-group btn-group-devided" data-toggle="buttons">
        <label class="btn btn-transparent grey-salsa btn-circle btn-sm active">
        <input type="radio" name="options" class="toggle" id="option1">Today</label>
        <label class="btn btn-transparent grey-salsa btn-circle btn-sm">
        <input type="radio" name="options" class="toggle" id="option2">Week</label>
        <label class="btn btn-transparent grey-salsa btn-circle btn-sm">
        <input type="radio" name="options" class="toggle" id="option2">Month</label>
    </div>
</div>

以下是我的日常图表：

<%= content_tag :div, "", id: "sales_statistics", data: {orders: balance_sales }, class: "portlet-body-morris-fit morris-chart", style: "height: 272px" %>

Answer 1

一种简单的方法是渲染所有三个图表，隐藏其中两个图表，并在单选按钮上设置点击处理程序以切换可见的图标。

您的单选按钮设置已经非常好了。这是一个最小版本，只删除你正在使用的所有类，这样它们就不会分散我们的注意力：

<div id="actions">
    <div>
        <label><input type="radio" name="chart" value="today" checked="checked"/>Today</label>
        <label><input type="radio" name="chart" value="week"  />Week</label>
        <label><input type="radio" name="chart" value="month" />Month</label>
    </div>
</div>

重要的部分是每个value，它们与我们想要显示的图表相对应：

<div id="charts">
    <div id="today" class="chart">Today Chart</div>
    <div id="week"  class="chart hidden">Week Chart</div>
    <div id="month" class="chart hidden">Month Chart</div>
</div>

正如您所看到的，我为每个图表添加了id个单选按钮value。默认情况下，我们的今日单选按钮被选中，因此使用简单的CSS隐藏周和月图表。

.hidden {
    display: none;
}

最后，我们将点击处理程序附加到所有单选按钮：

$(function() {
    $('#actions input').click(revealChart);
});

单击按钮时，我们将确定它是什么，隐藏所有图表，然后显示与单击按钮对应的图表。

function revealChart(event) {
    var chart = $(event.target).val(); // Name of chart to display
    $('#charts .chart').hide(); // Hide all charts
    $('#' + chart).show();  // Display chart with ID matching name
}

就在这里，所有这些都可以运行它：

function revealChart(event) {
    var chart = $(event.target).val(); // Name of chart to display
    $('#charts .chart').hide(); // Hide all charts
    $('#' + chart).show();  // Display chart with ID matching name
}

$(function() {
    $('#actions input').click(revealChart);
});

.hidden {
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="actions">
    <div>
        <label><input type="radio" name="chart" value="today" checked="checked"/>Today</label>
        <label><input type="radio" name="chart" value="week"  />Week</label>
        <label><input type="radio" name="chart" value="month" />Month</label>
    </div>
</div>

<hr />
    
<div id="charts">
    <div id="today" class="chart">Today Chart</div>
    <div id="week"  class="chart hidden">Week Chart</div>
    <div id="month" class="chart hidden">Month Chart</div>
</div>

如何在rails中使用不同图表的切换？

1 个答案: