Highcharts跨域数据加载完全指南：JSONP原理与实战

Highcharts.js2026-02-21 8:20

跨域数据

不可以在自己域名之外的 JSON 文件上使用 jQuery 的 .getJSON() 方法。不过可以使用 JSONP。

JSON 和 JSONP 的区别在于，普通的 JSON 文件只使用普通的 JSON 语法。这种方式无法实现跨域返回。使用 JSONP 时，会在 PHP 中用回调函数包裹 JSON 内容，从而返回一个 JSON 对象。如果你想显示的数据位于与你自己不同的域名上，这会非常有用。许多数据提供商都提供 JSONP 服务，比如 Google 和 Twitter。

这是一个示例：

服务器端的 PHP 文件：

php 复制代码

<?php
header("content-type: application/json"); 

$array = array(7,4,2,8,4,1,9,3,2,16,7,12);

echo $_GET['callback']. '('. json_encode($array) . ')';    

?>

使用 jQuery 调用回调函数的 JavaScript 代码。

js 复制代码

$(document).ready(function() {
    var options = {
        chart: {
            renderTo: 'container',
            type: 'spline'
        },
        series: [{}]
    };
    
    var url =  "http://url-to-your-remote-server/jsonp.php?callback=?";
    $.getJSON(url,  function(data) {
        options.series[0].data = data;
        var chart = new Highcharts.Chart(options);
    });
});