在Highcharts中导入JSON数据

Question

我已阅读了很多对同一项目的引用，但我仍感到困惑。我添加了我的代码。

在附件中我有两个图。 plot_1使用页面中定义的数据，plot_2相同但使用JSON导入的数据。 plot_1工作正常，plot_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>   

JSON文件数据就像这样。

{
"data" : [-25, -23, -15, -16, -26, -24, -26, -28, 29, -16, -22, -24, -22, -17, -21, -25, -21, -22, -23, -22]
}

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

Answer 1

你应该在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
    });