如何通过单选按钮调用生成图表 [英] How to Generate Chart by a radio button call

问题描述

我有一个网页，上面有点击单选按钮生成的销售图表。

Hi,

I have a web page with a sales chart generated by clicking on radio buttons.

$(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) {
                }
            });
        });
    });

HTML如下：

The HTML is given below

<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时生成图表...然后我必须更改单选按钮列表值并再次单击单选按钮以生成下一个图表...我想避免这种情况并在单击列表时生成图表...



问候，

Sajin

Using this Second Radio button click I am generating the chart... Now I want to generate the chart on clicking the Radio button list also... How to do that... The chart gets generated when I click on the rbtnZone... Then I have to change the Radio button list value and again click on the radio button to generate the next chart... I want to avoid that and generate the chart on clicking the List also...

Regards,
Sajin

推荐答案

（ function （）{

（ [id * = rbtnZone ]）。click（ function （）{
var row =

("[id*=rbtnZone]").click(function() { var row =

（ this ）。nearest（' Tr'的关系）;
var branchId =

(this).closest('tr'); var branchId =

这篇关于如何通过单选按钮调用生成图表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！