javascript - Highcharts $.ajax() in jQuery - pie chart

itPublisher 分享于

2020腾讯云10周年活动，优惠非常大！（领取2860元代金券），
地址：https://cloud.tencent.com/act/cps/redirect?redirect=1040

2020阿里云最低价产品入口，含代金券(新老用户有优惠)，
地址：https://www.aliyun.com/minisite/goods

推荐：javascript、jquery、ajax的关系
JavaScript包括Ajax，jQuery是一个JavaScript轻量级框架。

I'm new to Highcharts and all of the help from here and some research has got me to my current status using Highcharts in my project. I'm still having an issue, the pie chart isn't loading data retrieved using $.ajax(). I have no idea what to try next. Any direction or help is much appreciated.

I'm getting data from MS SQL and using $.ajax().

I want to replicate what I made here: http://jsfiddle.net/bvaxmcLr/, but with my data from SQL. I can see the data on the page, but I can't get the chart to show. All of my code is below. Does anyone have any suggestions/ideas? Thanks!

JavaScript file

推荐：javascript之jQuery ajax 操作
ajax不足 1.浏览器的支持度不够,IE 5以后才支持 2.破坏浏览器的前进,后退功能 3.搜索引擎的支持度不同 4.开发调试工具缺乏三层方法 1.$.ajax()最底层方法 2.$.l

$(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 file

<!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>

javascript jquery ajax charts highcharts
|
this question asked Dec 30 '14 at 19:37 Megatron 21 1 9 1 The AJAX call is succeeding? In OnSuccess what's the output of console.log(data.d)? My WAG is that Corrective_Action_ID is being returned as a string not an int. – Mark Dec 30 '14 at 22:27 It succeeds, but I get a weird chart to show. I added {} to the data part of the series... data: [{}] and it makes a pie chart, but its adding an extra slice to the front. i have 2 items pulling from the db, but showing 3 on the chart, with the first one being empty with no data, but shows a slice. – Megatron Dec 30 '14 at 22:58 The output from the console is Array [ Object, Object ] – Megatron Dec 30 '14 at 23:08 The json is the same as you have in jsfiddle? – Sebastian Bochan Dec 31 '14 at 9:38

javascript - Highcharts $.ajax() in jQuery - pie chart

Know someone who can answer? Share a link to this question via email, Google+, Twitter, or Facebook.

推荐：JavaScript、Ajax与jQuery的关系
简单总结： 1、JS是一门前端语言。 2、Ajax是一门技术，它提供了异步更新的机制，使用客户端与服务器间交换数据而非整个页面文档，实现页面的局部更新。 3、jQ

相关阅读排行

相关内容推荐

最新文章

请激活账号

ITKeyword

阿里云&腾讯云优惠汇总

javascript - Highcharts $.ajax() in jQuery - pie chart

Know someone who can answer? Share a link to this question via email, Google+, Twitter, or Facebook.

推荐：JavaScript、Ajax与jQuery的关系简单总结： 1、JS是一门前端 语言。 2、Ajax是一门 技术，它提供了异步更新的机制，使用客户端与服务器间交换数据而非整个页面文档，实现页面的局部更新。 3、jQ

相关阅读排行

相关内容推荐

最新文章

请激活账号

ITKeyword

阿里云&腾讯云优惠汇总

推荐：JavaScript、Ajax与jQuery的关系
简单总结： 1、JS是一门前端语言。 2、Ajax是一门技术，它提供了异步更新的机制，使用客户端与服务器间交换数据而非整个页面文档，实现页面的局部更新。 3、jQ