javascript - 根据列JQchart顶部选择的选项更改显示

Question

我需要三个单选按钮字段来在柱形图上显示年、月、周数据，以便当我选择任一选项时，显示应该是相应的。我在 JQchart 中找到了很多用于不同类型显示的示例，但找不到此示例。这里有没有其他选项可以替换单选按钮？请帮忙

Answer 1

您最好的选择是拥有三个系列的数据，每个系列一次。您可以使用单选按钮上的侦听器轻松换出系列。

本质上：

        <input type="radio" name="data" id="yearly" class="radioSelector" value="yearly">Yearly<br>
        <input type="radio" name="data" id="monthly" class="radioSelector" value="monthly">Monthly<br>
        <input type="radio" name="data" id="daily" class="radioSelector" value="daily">Daily

        <script>
        $('.radioSelector').click(function (event) {

            // Set target ID
            var id = $(event.target).attr('id');

            // get current series
            var series = $('#jqChart').jqChart('option', 'series');

            // check which radio
            switch (id) {
                 case 'yearly':
                     series = yearlydata;
                     break;
                 case 'monthly':
                     series = monthlydata;
                     break;
                 case 'daily':
                     series = dailydata;
                     break;
            }
            // update (redraw) the chart
            $('#jqChart').jqChart('update');
        });
        </script>