asp.net 圆环图 Telerik 数据绑定

Question

我正在 Web 表单上开发一个 Web 应用程序。在客户的仪表板上，我使用了 Telerik 图表（甜甜圈）。它适用于我在 Telerik 网站上看到的默认编码，但我需要知道如何在该图表上绑定 sql server 数据。

<telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
<telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
<div class="demo-containers">
    <div class="demo-container">
        <telerik:RadHtmlChart runat="server" ID="DonutChart1" Width="520" Height="500" Transitions="true" Skin="Silk">
            <ChartTitle Text="OS Usage Statistics for December 2012">
                <Appearance Align="Center" Position="Top">
                </Appearance>
            </ChartTitle>
            <Legend>
                <Appearance Position="Right" Visible="true">
                </Appearance>
            </Legend>
            <PlotArea>
                <Series>
                    <telerik:DonutSeries StartAngle="90" HoleSize="65">
                        <LabelsAppearance Position="Center" DataFormatString="{0} %" Visible="true"></LabelsAppearance>
                        <TooltipsAppearance Color="White" DataFormatString="{0}%"></TooltipsAppearance>
                        <SeriesItems>
                            <telerik:PieSeriesItem BackgroundColor="#00adcc" Exploded="false" Name="Win7" Y="55.6"></telerik:PieSeriesItem>
                            <telerik:PieSeriesItem BackgroundColor="#cccccc" Exploded="false" Name="Win8" Y="2.5"></telerik:PieSeriesItem>
                            <telerik:PieSeriesItem BackgroundColor="#999999" Exploded="false" Name="Vista" Y="2.8"></telerik:PieSeriesItem>
                            <telerik:PieSeriesItem BackgroundColor="#888888" Exploded="false" Name="NT" Y="1.8"></telerik:PieSeriesItem>
                            <telerik:PieSeriesItem BackgroundColor="#777777" Exploded="false" Name="WinXP" Y="21.1"></telerik:PieSeriesItem>
                            <telerik:PieSeriesItem BackgroundColor="#666666" Exploded="false" Name="Linux" Y="4.7"></telerik:PieSeriesItem>
                            <telerik:PieSeriesItem BackgroundColor="#555555" Exploded="false" Name="Mac" Y="8.7"></telerik:PieSeriesItem>
                            <telerik:PieSeriesItem BackgroundColor="#444444" Exploded="false" Name="Mobile" Y="2.2"></telerik:PieSeriesItem>
                        </SeriesItems>
                    </telerik:DonutSeries>
                </Series>
            </PlotArea>
        </telerik:RadHtmlChart>
    </div>
</div>

<telerik:RadAjaxManager runat="server" ID="theAjaxMaanger">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="demoConfigurator">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="demoConfigurator" LoadingPanelID="RadAjaxLoadingPanel1" />
                <telerik:AjaxUpdatedControl ControlID="DonutChart1" LoadingPanelID="RadAjaxLoadingPanel1" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>
<telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1" Skin="Silk">
</telerik:RadAjaxLoadingPanel>

请查看该参考网站：http://demos.telerik.com/aspnet-ajax/htmlchart/examples/charttypes/donutchart/defaultcs.aspx

public void donutfill()
{
    SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["constr"].ConnectionString);
    con.Open();
    SqlDataReader myReader = null;
    SqlCommand myCommand = new SqlCommand("select ( select sum([Budget Estimates 2017-18]) AS [FUNDWISE] from [dbo].[budgetbook-17-18] where Fund = '" + scnum.Text + "' ) , sum([Budget Estimates 2017-18]) as [costwise] from [dbo].[budgetbook-17-18] where Cost_ctr ='" + costcenter.Text + "'", con);

    myReader = myCommand.ExecuteReader();

    while (myReader.Read())
    {
        string totalfund;
        string totalcostbudget;
        totalfund = (myReader[0].ToString());
        totalcostbudget = (myReader[1].ToString());
        //Convert.ToDouble(totalcostbudget) / Convert.ToDouble(totalfund) * 360 = a;
        a = Convert.ToDouble(totalcostbudget);
        b = Convert.ToDouble(totalfund);
        piecostbudget = a / b * 100;
    }

    Double piefirst = pie100 - piecostbudget;
    Math.Round(piecostbudget);
    Math.Round(piefirst);
    con.Close();
} 

甜甜圈上需要显示的两件事是：

1) piecostbudget

2) 饼图

Answer 1

有两种方法可以接近。

1. 客户端

查看您提供的链接，我找到了这段代码：

    <%@ Page Language="C#"  %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:TelerikConnectionString %>"
        SelectCommand="SELECT [Year], [Value] FROM [Data] WHERE ([Subcategory_Id] = 1)"></asp:SqlDataSource>
    <div class="demo-container size-wide">
        <telerik:RadHtmlChart runat="server" Width="800px" Height="500px" ID="RadHtmlChart1"
            DataSourceID="SqlDataSource1">
            <PlotArea>
                <Series>
                    <telerik:ColumnSeries DataFieldY="Value" Name="Electricity Consumption">
                        <TooltipsAppearance Color="White" />
                    </telerik:ColumnSeries>
                </Series>
                <XAxis DataLabelsField="Year">
                    <LabelsAppearance RotationAngle="75">
                    </LabelsAppearance>
                    <TitleAppearance Text="Year">
                    </TitleAppearance>
                </XAxis>
                <YAxis>
                    <TitleAppearance Text="MWh">
                    </TitleAppearance>
                </YAxis>
            </PlotArea>
            <Legend>
                <Appearance Visible="false">
                </Appearance>
            </Legend>
            <ChartTitle Text="Electricity Consumption">
            </ChartTitle>
        </telerik:RadHtmlChart>
    </div>
    </form>
</body>
</html>

此代码使用 sql 查询对图表进行数据绑定。在这种情况下，他们正在创建一个条形图，但要考虑的关键是：

<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:TelerikConnectionString %>"
    SelectCommand="SELECT [Year], [Value] FROM [Data] WHERE ([Subcategory_Id] = 1)"></asp:SqlDataSource>

然后这个：

<telerik:RadHtmlChart runat="server" Width="800px" Height="500px" ID="RadHtmlChart1"
            DataSourceID="SqlDataSource1">

1. 服务器端 如果您需要在后面的代码中执行此操作，您可以在 <telerik:RadHtmlChart runat="server" ID="DonutChart1" Width="520" Height="500" Transitions="true" Skin="Silk"> 中使用 OnPreRender="DonutChart1_PreRender"

然后创建一个方法，然后您可以像这样执行 sql 和数据绑定：

protected void DonutChart1_PreRender(object sender, EventArgs e)
        {
            SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["constr"].ConnectionString);
            con.Open();
            SqlDataReader myReader = null;
            SqlCommand myCommand = new SqlCommand("select ( select sum([Budget Estimates 2017-18]) AS [FUNDWISE] from [dbo].[budgetbook-17-18] where Fund = '" + scnum.Text + "' ) , sum([Budget Estimates 2017-18]) as [costwise] from [dbo].[budgetbook-17-18] where Cost_ctr ='" + costcenter.Text + "'", con);

            myReader = myCommand.ExecuteReader();

            while (myReader.Read())
            {
                string totalfund;
                string totalcostbudget;
                totalfund = (myReader[0].ToString());
                totalcostbudget = (myReader[1].ToString());
                //Convert.ToDouble(totalcostbudget) / Convert.ToDouble(totalfund) * 360 = a;
                a = Convert.ToDouble(totalcostbudget);
                b = Convert.ToDouble(totalfund);
                piecostbudget = a / b * 100;
            }

            Double piefirst = pie100 - piecostbudget;
            Math.Round(piecostbudget);
            Math.Round(piefirst);


            RadHtmlChart1.Datasource = //your values
            RadHtmlchart1.Databound();
            con.Close();
        }

我使用此链接查找此信息：http://demos.telerik.com/aspnet-ajax/htmlchart/examples/databinding/entitydatasource/defaultcs.aspx