为什么高图不会在asp.net中显示我?

时间:2016-06-02 13:36:48

标签: asp.net highcharts

我是asp.net和高级控制的初学者,想在我的Web应用程序Web表单中使用高级控件,为此目的阅读本教程:
this tutorial
并在我的项目中编写此Web服务:

 public class cityPopulation
        {
            public string city_name { get; set; }
            public int population { get; set; }
            public string id { get; set; }
        }

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

            cityPopulation cpData = new cityPopulation();
            cpData.city_name = "tabriz";
            cpData.population = 100;
            p.Add(cpData);

            return p;
        }


该Web服务名称是这样的:

WebService1.asmx


并在我的网络表格中写下这个剧本:

<script type="text/javascript">
        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: "WebService1.asmx/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>


在该脚本编写此代码之前:

<script src="Scripts/jquery-2.2.3.min.js"></script>
    <script src="Scripts/Highcharts-4.0.1/js/highcharts.js"></script>


并写下这个HTML代码:

<select id="ddlyear">
    <option>2010</option>
    <option>2011</option>
    <option>2012</option>
    <option>2013</option>
    <option>2014</option>
    <option>2015</option>
</select>
<button id="btnCreatePieChart">Show </button>
<br />
<div>
    <div id="container" style="width: 500px; height: 500px"></div>
</div>


但是当我运行项目并触发按钮时,看不到任何东西,图表没有显示给我,发生了什么?我的代码是不正确的?我怎么能解决这个问题?谢谢。
我认为ajax无法调用Web服务!

0 个答案:

没有答案