Question

在我的ASP.NET MVC5应用程序中，我有一些图表，我使用JQPLOT和JSON-P，因为我从跨域源请求数据。

所以我的视图包含所有必需的包含文件。我能够从远程服务器检索数据。然而问题是密谋。

我已经阅读了关于处理JSON数据的STACK_OVERFLOW上的一些链接，但我还没有看到JSON-P的任何内容（我几乎可以肯定JSON-P响应也包含回调信息）。

因此我认为这个问题在SO上是不存在的，如果有人能找到它，请指出我。如果没有请求帮助。

查看：

<div id="chartdiv"></div>

<script type="text/javascript">
$(document).ready(function () {
    var ajaxDataRenderer = function (url, plot, options) {
        var ret = null;
        $.ajax({
            // have to use synchronous here, else the function will return before the data is fetched
            async: false,
            type: "GET",
            url: url,
            dataType: "jsonp",
            crossDomain: true,
            cache: false,
            success: function (data) {
                alert('success:' + data + ':');
                ret = data;
                $('#instructions').show();
            },
            error: function () {
                $('#error').show();
                $('#chartdiv').hide();
            }
        });
        $('#loading').hide();
        return ret;
    };
    var jsonurl = "http://10.199.108.119:3000/projects/jsonp/@Model.project_id";
    var chartdiv = $.jqplot('chartdiv', jsonurl, {
        dataRenderer: ajaxDataRenderer,
        dataRendererOptions: {
            unusedOptionalUrl: jsonurl
        },
        series: [{
            label: 'Scope',
            color: '#9BBB59',
            markerOptions: {
                show: false
            }
        },
        {
            label: 'Completed Hours',
            color: '#4F81BD',
            lineWidth: 5,
            markerOptions: {
                show: false
            }
        },
        {
            label: 'Milestones',
            showLine: false,
            markerOptions: {
                style: 'x',
                color: '#8F0000',
                size: 12
            },
            pointLabels: {
                show: true,
                location: 'n',
                ypadding: 6,
                labelsFromSeries: true,
                edgeTolerance: -100,
            },
        },
        {
            label: 'Builds',
            showLine: false,
            markerOptions: {
                style: 'diamond',
                color: '#00008F',
                size: 12
            },
            pointLabels: {
                show: true,
                location: 'n',
                ypadding: 8
            },
        }],
        axesDefaults: {
            labelRenderer: $.jqplot.CanvasAxisLabelRenderer
        },
        defaultAxisStart: 0,
        axes: {
            xaxis: {
                renderer: $.jqplot.DateAxisRenderer
            },
            yaxis: {
                label: "Effort (hours)",
                min: 0
            },
        },
        legend: {
            show: true,
            renderer: $.jqplot.EnhancedLegendRenderer,
            location: 'ne',
            placement: 'outsideGrid',
        },
        highlighter: {
            show: true,
            sizeAdjust: 7.5,
            tooltipAxes: 'y'
        },
        cursor: {
            show: true,
            zoom: true,
            showTooltip: false
        }
    });
});

我目前正在使用Chrome DeveloperTools来调试收到的数据。从服务器返回的数据如下所示：

jQuery21009413928152061999_1409095444713([[['2014-08-22 12:00AM', 118], ['2014-08-21 12:00AM', 126], ['2014-08-26 12:00AM', 118], ['2014-08-15 12:00AM', 148], ['2014-08-20 12:00AM', 129], ['2014-08-25 12:00AM', 118], ['2014-08-14 12:00AM', 148], ['2014-08-13 12:00AM', 148], ['2014-08-18 12:00AM', 145]], [['2014-08-22 12:00AM', 50], ['2014-08-21 12:00AM', 50], ['2014-08-26 12:00AM', 50], ['2014-08-15 12:00AM', 14], ['2014-08-20 12:00AM', 41], ['2014-08-25 12:00AM', 50], ['2014-08-14 12:00AM', 14], ['2014-08-13 12:00AM', 8], ['2014-08-18 12:00AM', 21]], [['2014-10-10 12:00AM', 118, 'Round 3 Software Delivery'], ['2014-08-15 12:00AM', 148, 'Round 2 WR Delivery']], [['2014-09-03 12:00AM', 0, 'Build Sprint 26'], ['2014-09-12 12:00AM', 0, 'Build Sprint 28']]])

JQPLOT不会呈现数据。我究竟做错了什么？

如何将此JSON-P数据转换为JQPLOT可接受的格式。我已经看到很多其他的例子将它转换成某种类型的数组，但是这里的数据更复杂，有4组值。除了JSON-P回调标头之外，它似乎也是正确的可接受格式。

请指教。提前谢谢。

Answer 1

问题：

JSONP请求无法同步（即async: false被忽略）。直接从jQuery docs：

跨域请求和dataType：＆＃34; jsonp＆＃34;请求不支持同步操作。

原因：

因此，您提供的代码会将ret初始化为null，然后启动（强制异步）ajax请求，然后立即返回null ret值。一段时间之后，ajax请求将完成，成功函数将更新ret以包含data，但因为执行已经从ajaxDataRenderer data返回，所以从未进入jqPlot。

修复：

要解决此问题，请在文档加载时启动ajax请求，并在ajax请求的success函数内实例化jqPlot对象。

var burndown;
$(document).ready(function() {
    $.ajax({
        async: true,
        type: "GET",
        url: "http://10.199.108.119:3000/projects/jsonp/@Model.project_id",
        dataType: "jsonp",
        crossDomain: true,
        cache: false,
        success: function (data) {
            burndown = $.jqplot('chartdiv', data, {
                // jqPlot configuration settings go here (not specific to this example)
            });
        },
        error: function () {
            alert("Error!");
        }
    });
});

Jqplot dataRenderer使用JSON-P数据而不是绘制图形

1 个答案:

问题：

原因：

修复：