asp.net甜甜圈圖telerik數據綁定

Question

我正在開發基於Webforms的Web應用程序。 在客戶的儀表板上，我使用了Telerik圖表（Donut）。 它適用於我在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）費用預算

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">

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

然后創建一個方法，您可以在其中執行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