在Highcharts中导入JSON数据

在Highcharts中导入JSON数据,json,highcharts,Json,Highcharts,我已经读了很多关于这个项目的参考资料,但我仍然感到困惑。我已经添加了我的代码 在所附代码中,我有两个绘图plot_1使用页面中定义的数据,plot_2相同,但使用JSON导入的数据绘图1工作正常,绘图2不工作。在这个论坛上导入JSON数据有很多不同的版本,我试图模仿其中的许多版本,但都没有成功。我正在嵌入式系统上使用此代码。如果有人能帮忙,我将不胜感激 <script> $(function () { $('#plot_1').highcharts({

我已经读了很多关于这个项目的参考资料,但我仍然感到困惑。我已经添加了我的代码

在所附代码中,我有两个绘图
plot_1
使用页面中定义的数据,
plot_2
相同,但使用JSON导入的数据<代码>绘图1工作正常,
绘图2
不工作。在这个论坛上导入JSON数据有很多不同的版本,我试图模仿其中的许多版本,但都没有成功。我正在嵌入式系统上使用此代码。如果有人能帮忙,我将不胜感激

<script>
$(function () { 
        $('#plot_1').highcharts({
        chart: {
        borderWidth: 2,
        borderRadius: 3,
        borderColor: '#a1a1a1',
                type: 'line',
        marginBottom: 30
        },
        title: {
                text: 'Battery Voltage and Current'
        },
        xAxis: {
                type: 'datetime',
        pointStart: Date.UTC(2013, 2, 26),      // Jan = 0
        pointInterval: 60 * 1000 * 15,      // 15 minutes
        labels: {
        align: 'center',
        x:  0,
        y:  16
        }
        },

        yAxis: [{               // Primary axis (left)
        startOnTick: true,
                title: {
                text: 'Volts',
        style: {
            color: '#89A54E'
        }
                },
        labels: {
        align: 'right',
        x: -3,
        y: 0,
        style: {
            color: '#89A54E'
        }
        },
        min: 6,
        max: 16

        },{                 // Secondary axis (right)
        opposite: true,
        gridLineWidth: 1,
            title: {
                text: 'Amps',
        style: {
            color: '#4572A7'
        }
                },
        labels: {
        align: 'left',
        x: 3,
        y: 0,
        style: {
            color: '#4572A7'
        }
        },
        min: -0.5,
        max:  0.5
    }],

    legend: {
        enabled: false
    },

    plotOptions: {
        series : {
        marker: {
            enabled: false
        }
        }
    },

        series: [{
            name: 'Volt',
        color: '#89A54E',
                data:  [12.4,   12.4,    12.4,    12.2,    12.0,    11.9,    11.9,    11.8,    11.6,    11.4,    11.1,    10.9,     11.4,     11.5,     11.7,     11.9,     12.2,     12.4,     12.4,     12.4]
        }, {
                name: 'Amp',
        color: '#4572A7',
        yAxis: 1,
                data: [-0.1, -0.2, -0.1, -0.2, -0.3, -0.3, -0.4, -0.3, -0.4, -0.4, -0.3, -0.3,  0.3,  0.3,  0.4,  0.5,  0.4,  0.4,  0.4,  0.1]
        }]
        });
});
    </script>   


    <script>
$(function () {

    var data1 = [], data2 = [];

    function requestData1() {
        $.ajax({
            url: "sig0.jsn",
            dataType: "json",
            success: function(data1) {
                alert (data1);
                this.series[0].setData(data1);
            },
            cache: false
        });
    }

    function requestData2() {
        $.ajax({
            url: "sig2.jsn",
            dataType: "json",
            success: function(data2) {
                alert (data2);
                this.series[0].setData(data2);
            },
            cache: false
        });
    }


        $('#plot_2').highcharts({
        chart: {
        borderWidth: 2,
        borderRadius: 3,
        borderColor: '#a1a1a1',
                type: 'line',
        marginBottom: 30,
        events: {
        load: requestData1,
        load: requestData2
        }
        },
        title: {
                text: 'Received Signal Strength'
        },
        xAxis: {
                type: 'datetime',
        pointStart: Date.UTC(2013, 2, 26),      
        pointInterval: 60 * 1000 * 15,
        labels: {
        align: 'center',
        x:  0,
        y:  16
        }
        },

        yAxis: {                // Primary axis (left)
        startOnTick: true,
                title: {
                text: 'Strength (db)'
                },
        labels: {
        align: 'right',
        x: -3,
        y: 0

        },
        min: -40,
        max: 0

    },

    legend: {
        align: 'left',
        verticalAlign: 'top',
        floating: true,
        x: 50,
        y: 45
    },

    plotOptions: {
        series : {
        marker: {
            enabled: false
        }
        }
    },

        series: [{
            name: 'Device A',
        color: '#89A54E',
                data: data1
        },{
            name: 'Device B',
        color: '#4572A7',
                data: data2
        }]

        });

});
    </script>   

最后,我将X轴时间数据与Y轴数据配对,因为我很可能会错过数据记录中的一些时间间隔,所以如果你能在答案中考虑的话。总的来说,我想绘制4个传感器的数据。

您应该在ajax调用中移动图表inilazize,因为在您的情况下,ajax和highcharts定义“同时”运行

因此,它应该看起来像:

 $.ajax({
        url: "sig2.jsn",
        dataType: "json",
        success: function(data2) {
            alert (data2);
            this.series[0].setData(data2);
            $('#plot_2').highcharts({
                            //parameters
            });
        },
        cache: false
    });

你真正的问题是什么?该过程是在
$的成功回调中创建图表。getJSON
感谢您提供的信息。我试过了,但似乎不起作用。当我按照你的建议去做时,整个图表不会出现。当我使用之前发布的代码时,我得到了基本图,但没有数据。通过我的代码,我还得到一个弹出窗口,上面写着“来自网页的污水”[object]
 $.ajax({
        url: "sig2.jsn",
        dataType: "json",
        success: function(data2) {
            alert (data2);
            this.series[0].setData(data2);
            $('#plot_2').highcharts({
                            //parameters
            });
        },
        cache: false
    });