如何使用jquery在ASP.NET中使用highcharts获取饼图。 [英] How to get pie chart using highcharts in ASP.NET using 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>

数据存储在系列中，我测试了它，但情节并不像你分享的那样。你能让我知道我是否有任何错误。





提前感谢，

venkatesh。

data was storing in series i tested it but plot is not coming like as you shared .can you please let me know is there any mistake done by me.


thanks in advance,
venkatesh.

推荐答案

（ document ）。ready（ function （）{

(document).ready(function () {

.ajax（{
type： POST，
contentType： application / json; charset = utf-8，
url： HighchartService.asmx / FruitAnalysis，
data： {} ，
dataType： json，
成功： function （Result）{
Result = Result.d;
var data = [];
for （ var i in 结果）{
var series = new 数组（Result [i] .Name，Result [i] .Value）;
data.push（系列）;
}
DrawChart（系列）;
}，
错误：功能（结果）{
alert（ 错误）;
}
}）;
}）;
function DrawChart（series）{

.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 ]，
止损：[
[ 0 ，' rgb（255,255,255）']，
[ 1 ，' rgb（200,200,255）']
]
}
}，
title：{
text：' 特定月份的水果市场份额，2014'
}，
工具提示：{
pointFormat：' {series .name}： {point.percentage：.1f}％'
}，
plotOptions：{
pie：{
allowPointSelect ： true ，
cursor：' pointer' ，
dataLabels：{
enabled： true ，
格式： ' {point.name} ：{point.percentage：.1f}％'，
style：{
color：（Highcharts.theme&& Highcharts.theme.contrastTextColor）|| ' black'
}
}
}
}，
系列：[{
类型：' pie'，
name：' Fruit share'，
data：series
}]
}）;
}
< / script>

('#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>

数据存储在系列中，我测试了它，但情节并不像你分享的那样。你能让我知道我是否有任何错误。





提前感谢，

venkatesh。

data was storing in series i tested it but plot is not coming like as you shared .can you please let me know is there any mistake done by me.


thanks in advance,
venkatesh.

这篇关于如何使用jquery在ASP.NET中使用highcharts获取饼图。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！