注册 | 登录

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

itPublisher 分享于





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:, 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: '{}: <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: []

    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]);
        //$("#ulItem").append("<ul>" + value.Status_Color + value.Corrective_Action_ID + "</ul>");


    chart = new Highcharts.Chart(options);

function OnError(data) {

HTML file

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Pie Chart Example</title>
    <script type="text/javascript" src=""></script>
    <script src=""></script>
    <script src=""></script>
    <script src=""></script>
    <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
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


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


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








您的注册邮箱: 修改

重新发送激活邮件 进入我的邮箱