来自ajax的Highchart数据对我不起作用

时间:2014-07-09 05:49:50

标签: javascript jquery ajax highcharts

我使用以下代码显示饼图,来自通用处理程序的数据。数据来自通用处理程序,但图表未显示。请帮我这样做..

<script type="text/javascript">
    $(function () {
        //            try {
        var chart;
        //var mytables = $.ajax({ url: 'Handler/ChartHandler.ashx?Type=PayableCount', async: false, success: function (data, result) { if (!result) alert('Failure to retrieve the data.'); } }).responseText;
        //alert(mytables);
        function requestData() {
            $.ajax({
                url: 'Handler/ChartHandler.ashx?Type=PayableCount',
                async: false,
                success: function (data) {

                    //var mytables = JSON.parse(data);
                    return [{ "name": "CHE-TELUGU", "value": 123,"y": 10.8},{"name": "CHE-CORPORATE","value": 45,"y": 40.8},{"name": "CHE-MALAYALAM","selected": true,"sliced": true,"value": 155,"y": 12.8},{"name": "CHE-OPERATION","value": 20,"y": 60.8},{"name": "TRY-OPERATION","value": 20,"y": 60.8}];
                    if (!result) alert('Failure to retrieve the data.');
                }
            }).responseText;
        }

        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'curpayable',
                plotBackgroundColor: null,
                plotBorderWidth: 1, //null
                plotShadow: false,                    
                events: {
                    load: requestData
                }
            },
            title: {
                text: ''
            },
            tooltip: {
                pointFormat: '{series.name}: <b>{point.value}</b>'
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: true,
                        format: '<b>{point.name}</b>: {point.value}',
                        style: {
                            color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                        }
                    }
                }
            },
            series: [{
                type: 'pie',
                name: 'Payable Count',
                data: []
            }]
        });
    });

</script>

这是我更新的代码,请仔细检查并提供任何解决方案。

1 个答案:

答案 0 :(得分:0)

好的,这是代码:

在加载时使用testdata调用该函数,但您可以将其删除并对ajax调用进行必要的更改。

请根据需要进行格式更改。

检查: http://jsfiddle.net/Y7HPD/

     $(function() {
    drawPie([
    ['ONETOUCH   DEVICE', 27.78],
    ['FREESTYLE  DEVICE', 20.83],
    ['Nova Max  Test Strips  ', 11.11],
    ['ONETOUCH   DEVICE 2PK', 11.11]
]);

 $.post('your URL', {
    delay: 1
}, function (data) {
    drawPie(data);
}, 'json');
});


function drawPie(dd) {
$('#container').highcharts({
    chart: {
        plotBackgroundColor: null,
        plotBorderWidth: 1,//null,
        plotShadow: false
    },
    title: {
        text: 'Browser market shares at a specific website, 2014'
    },
    tooltip: {
        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
    },
    plotOptions: {
        pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            dataLabels: {
                enabled: true,
                format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                style: {
                    color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                }
            }
        }
    },
    series: [{
        type: 'pie',
        name: 'Browser share',
        data: dd

    }]
});
};