Member 11728977 Ответов: 2

Как получить круговую диаграмму с помощью highcharts в ASP.NET использование jquery.


<script src="Scripts/jquery.min.js"></script>
<script src="Scripts/highcharts.js"></script>
<script src="Scripts/exporting.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $.ajax({
            type: "POST",
            contentType: "application/json; charset=utf-8",
            url: "HighchartService.asmx/FruitAnalysis",
            data: "{}",
            dataType: "json",
            success: function (Result) {
                Result = Result.d;
                var data = [];
                for (var i in Result) {
                    var series = new Array(Result[i].Name, Result[i].Value);
                    data.push(series);
                }
                DrawChart(series);
            },
            error: function (Result) {
                alert("Error");
            }
        });
    });
    function DrawChart(series) {
        $('#container').highcharts({
            chart: {
                plotBackgroundColor:null,
                plotBorderWidth: 1, //null,
                plotShadow: false,
                backgroundColor: {
                    linearGradient: [0, 0, 500, 500],
                    stops: [
                [0, 'rgb(255, 255, 255)'],
                [1, 'rgb(200, 200, 255)']
                    ]
                }
            },
            title: {
                text: 'fruit  market shares at a specific month, 2014'
            },
            tooltip: {
                pointFormat: '{series.name}: {point.percentage:.1f}%'
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: true,
                        format: '{point.name}: {point.percentage:.1f} %',
                        style: {
                            color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                        }
                    }
                }
            },
            series: [{
                type: 'pie',
                name: 'Fruit share',
                data: series
            }]
        });
    }
</script>





данные хранились последовательно, я тестировал их, но сюжет не идет так, как вы поделились .


заранее спасибо,
Венкатеш.

2 Ответов

Рейтинг:
2

Vincent Maverick Durano

Вы должны использовать отладчик, например, используя инструменты браузера, чтобы выяснить вещи. Вы можете переключиться на вкладку консоль, чтобы найти любые ошибки скрипта в вашем коде.

Всякий раз, когда я хочу исследовать новый тип диаграммы от highchart, я бы направился к их демонстрационным примерам сайта, чтобы проверить что-то. Вы можете найти их здесь: Демо-версии Highcharts / Highcharts[^]


Рейтинг:
2

Member 11728977

&ЛТ;скрипт СРЦ="HighchartJS/jquery.min.js"&ГТ;&ЛТ;/скрипт>
&ЛТ;скрипт СРЦ="HighchartJS/highchart.js"&ГТ;&ЛТ;/скрипт>
&ЛТ;скрипт СРЦ="HighchartJS/highchartdata.js"&ГТ;&ЛТ;/скрипт>
&ЛТ;скрипт СРЦ="HighchartJS/highchartdrilldown.js"&ГТ;&ЛТ;/скрипт>
&ЛТ;скрипт СРЦ="HighchartJS/exporting.js"&ГТ;&ЛТ;/скрипт>
< script type= "text/javascript">
$(документ).готово(функция () {
$.Аякс({
тип: "пост",
contentType: "application/json; charset=utf-8",
url: "HighchartService. asmx/FruitAnalysis",
данные: "{}",
тип данных: "json",
успех: функция (результат) {
Результат = Результат. d; .0

ВАР сведения = [];
для (var i в результате) {
ВАР серия = новый массив(результат[я].Название, результат[я].Значение);
данных.толчок(серия);
}
DrawChart(данные);
},
ошибка: функция (результат) {
alert ("ошибка");
}
});
});
функция DrawChart (серия) {
$('#container'). highcharts({
диаграмма: {
plotBackgroundColor: нуль,
plotBorderWidth: 1, / / null,
plotShadow: накладные
},
заглавие: {
текст: "доля рынка фруктов в определенном месяце 2014 года"
},
подсказка: {
headerFormat: в '<промежуток стиль="шрифт-размер:11px"&ГТ;{серии.имя}&ЛТ;/службы&ГТ;&ЛТ;БР&ГТ;',
pointFormat: в '<промежуток стиль="цвет:{точка.цвет}"&ГТ;{пункт.имя}&ЛТ;/службы&ГТ;: &ЛТ;б&ГТ;{пункт.г:.2Ф}%&ЛТ;/б&ГТ; общего&ЛТ;БР/&ГТ;'
},
plotOptions: {
пирог: {
allowPointSelect: правда,
курсор: "указатель",
dataLabels: {
включено: true,
формат: '&ЛТ;б&ГТ;{пункт.имя}&ЛТ;/б&ГТ;: {точка.процент:.1Ф} %',
стиль: {
цвет: (Highcharts.тема &&усилителя; Highcharts.тема.contrastTextColor) || 'черный'
}
}
}
},
серии: [{
тип: "пирог",
название: "Фруктовая доля",
ряд данных
}]
});










В Коде Веб-Сервиса

public class HighchartService : System.Web.Services.WebService
   {
       public class FruitEnity
       {
           public string Name { get; set; }
           public int Value { get; set; }
       }
       [WebMethod]
       public List<fruitenity> FruitAnalysis()
       {
           List<fruitenity> fruitinfo = new List<fruitenity>();
           DataSet ds = new DataSet();
           string sql=ConfigurationManager.ConnectionStrings["sql"].ConnectionString;
           using (SqlConnection con = new SqlConnection(sql))
           {
               using (SqlCommand cmd = new SqlCommand())
               {
                   cmd.CommandText = "select name,value from tblUsers";
                   cmd.Connection = con;
                   using (SqlDataAdapter da = new SqlDataAdapter(cmd))
                   {
                       da.Fill(ds, "tblUsers");
                   }
               }
           }
           if (ds != null)
           {
               if (ds.Tables.Count > 0)
               {
                   if (ds.Tables["tblUsers"].Rows.Count > 0)
                   {
                       foreach (DataRow dr in ds.Tables["tblUsers"].Rows)
                       {
                           fruitinfo.Add(new FruitEnity { Name = dr["name"].ToString(), Value = Convert.ToInt32(dr["value"]) });
                       }
                   }
               }
           }
           return fruitinfo;
       }
   }</fruitenity></fruitenity></fruitenity>