个人中心
gpt4 book ai didi

c# - 如何在 C# .Net 中显示数据库中的 Highcharts

转载 作者：搜寻专家 更新时间：2023-10-30 20:36:10 26 4
gpt4 key购买 nike

我看过这个http://codepedia.info/chartjs-asp-net-create-pie-chart-with-database-calling-jquery-ajax-c/链接并遵循每个步骤，但在代码后面而不是 asmx 页面中获取输出(我使用了“public class cityPopulation”)，这会是错误吗

</head>
<body>
    <script>
        function drawPieChart(seriesData) {

            $('#container').highcharts({
                chart: {
                    plotBackgroundColor: null,
                    plotBorderWidth: null,
                    plotShadow: false,
                    type: 'pie'
                },
                title: {
                    text: 'Population percentage city wise'
                },
                tooltip: {
                    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        dataLabels: {
                            enabled: true,
                            format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                            style: {
                                color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                            }
                        }
                    }
                },
                series: [{
                    name: "Brands",
                    colorByPoint: true,
                    data: seriesData
                }]
            });
        }
        $("#btnCreatePieChart").on('click', function (e) {
            var pData = [];
            pData[0] = $("#ddlyear").val();

            var jsonData = JSON.stringify({ pData: pData });

            $.ajax({
                type: "POST",
                url: "aspchartjsdemo.aspx/getCityPopulation",
                data: jsonData,
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: OnSuccess_,
                error: OnErrorCall_
            });

            function OnSuccess_(response) {
                var aData = response.d;
                var arr = []

                $.map(aData, function (item, index) {
                    var i = [item.city_name, item.population];
                    var obj = {};
                    obj.name = item.city_name;
                    obj.y = item.population;
                    arr.push(obj);
                });
                var myJsonString = JSON.stringify(arr);
                var jsonArray = JSON.parse(JSON.stringify(arr));

                drawPieChart(jsonArray);

            }
            function OnErrorCall_(response) {
                alert("Whoops something went wrong!");
            }
            e.preventDefault();
        });
        </script>
    <form id="form1" runat="server">
    <div>
        <asp:DropDownList ID="ddlyear" runat="server" >
            <asp:ListItem>2010</asp:ListItem>
            <asp:ListItem>2011</asp:ListItem>
            <asp:ListItem>2012</asp:ListItem>
        </asp:DropDownList>

        <asp:Button ID="btnCreatePieChart" runat="server" Text="Button" />

<br />
<div>
    <div id="container" style="width: 500px; height: 500px"></div>
</div>
    </div>
    </form>
</body>
</html>


here is my  Code Behind..Im Unable to Fetch the data from database.

    [WebMethod]
    public List<cityPopulation> getCityPopulation(List<string> pData)
    {
        List<cityPopulation> p = new List<cityPopulation>();

        using (NpgsqlConnection con = new NpgsqlConnection("Server=Localhost;Port=5432;User Id=postgres;Password=postgres;Database=database4;"))
        {
            string myQuery = "SELECT id_, city_name, population FROM  tb_city_population WHERE  year_of = @year";
            NpgsqlCommand cmd = new NpgsqlCommand();
            cmd.CommandText = myQuery;
            cmd.CommandType = CommandType.Text;
            cmd.Parameters.AddWithValue("@year", pData[0]);
            cmd.Connection = con;
            con.Open();
            NpgsqlDataReader dr = cmd.ExecuteReader();
            if (dr.HasRows)
            {
                while (dr.Read())
                {
                    cityPopulation cpData = new cityPopulation();
                    cpData.city_name = dr["city_name"].ToString();
                    cpData.population = Convert.ToInt32(dr["population"].ToString());
                    p.Add(cpData);
                }
            }
        }
        return p;
    }

    public class cityPopulation
    {
        public string city_name { get; set; }
        public int population { get; set; }
        public string id { get; set; }
    }
Any Help Highly appreciated..

最佳答案

这就是我构建 Pie 的方式:

<div id="pieChart"></div>

<script type="text/javascript" src="highcharts.js"></script>

<script>
    var myPieData = [ ['AAA', 34.03], ['BBB', 27.01], ['CCC', 18.77], ['DDD', 11.01], ['EEE', 5.91], ['FFF', 3.27] ];

    chart = new Highcharts.Chart({
        chart: {
            renderTo: 'pieChart',
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false
        },
        title: {
            text: 'My PieData'
        },
        tooltip: {
            pointFormat: '<b>{point.percentage:.2f}%</b>',
            percentageDecimals: 2
        },
        plotOptions: {
            pie: {
                allowPointSelect: false,
                cursor: 'default',
                dataLabels: {
                    enabled: false,
                    color: '#000000',
                    connectorColor: '#000000',
                    formatter: function () {
                        return '<b>' + this.point.name + '</b>: ' + this.percentage + ' %';
                    }
                }
            }
        },
        series: [{
            type: 'pie',
            name: '',
            data: myPieData
        }]
    });
</script>

您必须用自己的数据替换的部分是[ ['Label A', 34.03], ['Label B', 27.01], ['Label C', 18.77], ['Label D', 11.01], ['Label E', 5.91], ['Label F', 3.27] ]当然所有数据的总值应该是100.00%

您可以使用字面值或填充有代码隐藏内容的字符串来做到这一点:var myPieData = [ <%= pieData %> ]或从外部来源获取。

根据您的本地化设置，数值可以包含“,”而不是“.” (23,59 或 23.59)。如果您的本地化使用“,”，则必须将其替换为点。

更新

根据要求提供一个示例，说明如何获取可用于构建饼图的正确字符串。这应该让你开始......只要确保population是百分比，不是绝对数字。

public string getCityPopulation(List<string> pData)
{
    StringBuilder sb = new StringBuilder();
    string myQuery = "SELECT city_name, population FROM tb_city_population WHERE (year_of = @year)";

    using (SqlConnection connection = new SqlConnection(Common.connectionString))
    using (SqlCommand command = new SqlCommand(myQuery, connection))
    {
        command.Parameters.AddWithValue("@year", pData[0]);
        try
        {
            connection.Open();
            SqlDataReader dr = command.ExecuteReader();
            if (dr.HasRows)
            {
                while (dr.Read())
                {
                    sb.Append("[");
                    sb.Append("'" + dr["city_name"].ToString() + "'");
                    sb.Append(", ");
                    sb.Append(dr["population"].ToString().Replace(",", "."));
                    sb.Append("],");
                }
            }
        }
        catch
        {
            //error connecting\reading the database
        }
    }

    return "[ " + sb.ToString().TrimEnd(',') + " ]";
}

关于c# - 如何在 C# .Net 中显示数据库中的 Highcharts，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38867183/

26 4 0
文章推荐： database - Sybase ASE 15.7 - 如何将两个数据库中的对象合并到一个数据库中？
文章推荐： php - 我应该从 mysql 升级到 PDO 的 mysqli 吗？
文章推荐： sql - has_table 键的日期期间
文章推荐： c# - 无法创建文件 database.mdf，因为它已经存在
搜寻专家
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com