Question

我是Highcharts的新手和来自这里的所有帮助，一些研究使我在我的项目中使用Highcharts获得了当前状态。我还有问题，饼图不能加载使用$ .ajax（）检索的数据。我不知道下一步该尝试什么。任何方向或帮助都非常感谢。

我从MS SQL获取数据并使用$ .ajax（）。

我想复制我在这里创建的内容：http://jsfiddle.net/bvaxmcLr/，但是我的数据来自SQL。我可以在页面上看到数据，但我无法显示图表。我的所有代码都在下面。有没有人有任何建议/想法？谢谢！

JavaScript文件

$(document).ready(function () {

var options = {

    chart: {
        renderTo: 'container',
        type: 'pie',
        options3d: {
            enabled: true,
            alpha: 45
        }
    },
    title: {
        text: null
    },
    subtitle: {
        text: null
    },
    credits: {
        enabled: false
    },
    tooltip: {
        pointFormat: '{series.name}: <b>{point.y:.1f}</b>'
    },
    plotOptions: {
        pie: {
            colors: ['#739600', '#bb0826', '#fcc60A'],
            size: '100%',
            //innerSize: 100,
            depth: 45,
            allowPointSelect: true,
            cursor: 'pointer',
            dataLabels: {
                enabled: false
            },
            showInLegend: true
        }
    },
    series: [{
        name: 'Amount',
        data: []
    }]
}

$.ajax({
    type: "POST",
    url: "../../WebServices/ORM-CV-Service.asmx/fetch_A1ACicat",
    data: {},
    dataType: "json",
    contentType: "application/json; charset=utf-8",
    async: true,
    success: OnSuccess,
    error: OnError
});

function OnSuccess(data) {

    $.each(data.d, function (key, value) {

        options.series[0].data.push([value.Status_Color, value.Corrective_Action_ID]);
        alert(value.Status_Color);
        alert(value.Corrective_Action_ID);
        //$("#ulItem").append("<ul>" + value.Status_Color + value.Corrective_Action_ID + "</ul>");

    })

    chart = new Highcharts.Chart(options);

}
function OnError(data) {
    alert('fail');
}});

HTML文件

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Pie Chart Example</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://code.highcharts.com/highcharts.js"></script>
    <script src="http://code.highcharts.com/highcharts-3d.js"></script>
    <script src="http://code.highcharts.com/highcharts-more.js"></script>
</head>
<body>
    <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</body>
</html>

jQuery中的Highcharts $ .ajax（） - 饼图

0 个答案: