如何通过单选按钮调用生成图表

Question

我有一个网页，其中包含通过单击单选按钮生成的销售图表。

$(function() {
        $("[id*=rbtnZone]").click(function() {
            var row = $(this).closest('tr');
            var branchId = $(row).find('[id*=hfBranchId]').val();
            var rbtlSales = $("#<%= rbtlSales.ClientID%>");
            var selectedValue = rbtlSales.find("input:checked").val();
            
 
            $.ajax({
                url: '<%=ResolveUrl("~/Corporate/Sales.aspx/GetZoneData") %>',
                data: "{'rbtlSales':'" + selectedValue + "'}",
                dataType: "json",
                type: "POST",
                contentType: "application/json; charset=utf-8",
                success: function(data) {
                    var labels = [];
                    var datas = [];
                    $.each(data.d, function(i, item) {
                        var l = item.split('-')[0];
                        var d = item.split('-')[1];
                        var dd = d | 0;
                        labels.push(l);
                        datas.push(dd);
                    });
 
                    var barChartLocData =
            {
                labels: labels,
                datasets:
                [
                    {
                        fillColor: "indianred",
                        highlightFill: "red",
                        data: datas
                    }
                ]
            };
                    var ctx = document.getElementById("canvas").getContext("2d");
                    new Chart(ctx).HorizontalBar(barChartLocData, {
                        responsive: true,
                        scaleFontColor: "#000",
                        showTooltips: false,
                        onAnimationComplete: function() {
                            var ctx = this.chart.ctx;
                            ctx.font = this.scale.font;
                            ctx.fillStyle = this.scale.textColor
                            ctx.textAlign = "right";
                            ctx.textBaseline = "center";
                            this.datasets.forEach(function(dataset) {
                                dataset.bars.forEach(function(bar) {
                                    ctx.fillText(bar.value, bar.x + 20, bar.y);
                                });
                            });
                        }
                    });
                },
                error: function(response) {
                },
                failure: function(response) {
                }
            });
        });
    });

<asp:RadioButtonList ID="rbtlSales" runat="server" Font-Bold="True" CellPadding="1" RepeatLayout="Flow">
    <asp:ListItem Value="today" Selected="True">Today's Sales</asp:ListItem>
    <asp:ListItem Value="yesterday">Yesterday's Sales</asp:ListItem>
    <asp:ListItem Value="mtd">MTD</asp:ListItem>
    <asp:ListItem Value="prevmonth">Previous Month Sales</asp:ListItem>
    <asp:ListItem Value="ytd">YTD</asp:ListItem>
</asp:RadioButtonList>
 
<asp:RadioButton ID="rbtnZone" runat="server" Text="Zone Wise" GroupName="rb1" />

使用此第二单选按钮单击我生成图表...现在我想在单击单选按钮列表时生成图表...如何执行...当我单击时生成图表rbtnZone ...然后我必须更改单选按钮列表值并再次单击单选按钮以生成下一个图表...我想避免这种情况，并在单击列表时生成图表...

此致 洒进