Question

我可以在另一个域中绘制带有JSON值的图表。我使用ajax和回调来制作crossdomain并获取值。

function drawChart() {
    var options = {
        chart: {
            renderTo: 'chart01',
            marginRight: 0,
            marginTop: 60,
            type: 'column',
            options3d: {
                enabled: true,
                alpha: 15,
                beta: 15,
                viewDistance: 25,
                depth: 90
            }
        },
        plotOptions: {
            column: {
                depth: 90
            }
        },
        title: {
            text: 'CSV Values'
        },
        xAxis: {
            title: {
                text: '',
                margin: 0
            },
            categories: []
        },
        yAxis: {
            title: {
                text: 'Title'
            },
        },
        tooltip: {
            enabled: false
        },
        series: []
    };
    $.ajax({
        url: "http://<external_path>/json.asp?callback=?",
        data: 'show=impression',
        type: 'post',
        dataType: "json",
        success: function (data) {
            var intSeries = data.length;
            var cont = 0;
            if (intSeries > 0) {
                intSeries--;
                options.xAxis.categories = data[cont]['data'];
                while (cont < intSeries) {
                    options.series[cont] = data[cont + 1];
                    cont++;
                }
                var chart = new Highcharts.Chart(options);
            }
        }
    });
};

在json.asp（在另一台服务器中）我使用回调函数返回json值：

Response.ContentType = "application/json"
dim strJSON
strJSON = "" & _
    "[" & _
        "{" & _
            """name"": ""General Values""," & _
            """data"": [""Porcentaje""]" & _
        "}, {" & _
            """name"": ""Value 1""," & _
            """data"": [34.60436]" & _
        "}, {" & _
            """name"": ""Value 2""," & _
            """data"": [12.30343]" & _
        "}, {" & _
            """name"": ""Value 3""," & _
            """data"": [53.30423]" & _
        "}" & _
    "]"
response.write request.QueryString("callback") & "(" & strJSON2 & ")"

工作正常。我的问题是使用外部CSV或XML运行图表。我已经证明了一些方法，但我总是收到错误 401 Unauthorized 。我从dataType: "json"更改为dataType: "text"或dataType: "xml"（CSV和XML模式），并使用新的外部路径，但它不起作用。

我如何从外部CSV或XML文件中获取值？我无法在我的服务器上放置那些文件，所以我需要它在另一台服务器上。

更新我在我的服务器上添加了使用此值启用CORS：

Access-Control-Allow-Credentials: true
Access-Control-Allow-Headers:     Authorization
Access-Control-Allow-Methods:     GET, POST, PUT, DELETE
Access-Control-Allow-Origin:      *

我修改了ajax方法：

$.ajax({
    url: "http://<external_path>/test.csv",
    type: 'post',
    dataType: "text",
    xhrFields: {
        withCredentials: true
    }
    //-- I've tried to authenticate without success
    //beforeSend: function (request){ request.setRequestHeader( ""Authorization"", btoa('<user>:<pass>')); },
    success: function (data) {
        //---- Code to get values ----//
    }
});

更改后，我继续401错误。

Answer 1

一种方法是在服务器上运行一个简单的代理，为您提取数据。即您从代理进程请求数据，代理进程从远程系统请求数据并将其返回给您。

此问题是需要绕过跨域限制的典型示例。 StackOverflow上有很多关于这个主题的问题和答案。

带外部CSV的Highchart（在外部域中）

1 个答案: