Question

我正在使用Highcharts和实时数据。我有一个正确设置的ajax似乎并且有一个setTimeout被调用以引入实时数据。每当该数据进入时，我想将addPoint（）添加到我的系列中并绘制新图形（向左移动）。下面是我的代码，第85行是.addPoint调用，但是你会在控制台中看到它显示的不是函数或未定义。

我也从控制台知道我正在从我的图表中正确调用我的数据（chart1.data.series [0]返回和对象）。这是关于系列数据和addPoint的高级图表文档：＆lt; http://api.highcharts.com/highcharts#Series.addPoint＆gt;

知道我哪里出错了吗？我是js 1年的新人＆lt;。所以我感谢你的帮助！

<!doctype html>
<html>

<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script src="http://code.highcharts.com/highcharts.js"></script>
</head>

<body>
    <div id="container" style="width:100%"></div>
</body>
<script>
chart1 = {
    yAxisMin: null,
    yAxisMax: null
};
// empty objects for our data and to create chart
seriesData = [];
BPM = [];
time1 = [];

// console.log(chart1.data.series);

$(function() {
    $(document).ready(function() {
        Highcharts.setOptions({
            global: {
                useUTC: false
            }
        });


        function requestData() {
            var url = 'http://msbandhealth.azurewebsites.net/odata/PulsesAPI/';
            $.ajax({
                url: url,
                dataType: 'json',
                context: seriesData,
                success: function(data) {

                    shift = chart1.data.series[0].data.length > 20;
                    // structure our data 
                    for (var i = 0; i < data.value.length; i++) {
                        bpm = data.value[i].BPM;
                        time = data.value[i].Time;
                        console.log(time);
                        this.push([time, BPM]);
                        BPM.push(bpm);
                        time1.push(time);
                    }

                    // console.log(series[0]);
                    // find the highest pulse  so we can set it to the highest y point
                    chart1.yAxisMax = (function(array) {
                        var pulse_array = [];

                        for (var i = 0; i < array.length; i++) {
                            if (array[i] != null) {
                                pulse_array.push(array[i]);
                            }
                        }
                        return Math.max.apply(Math, pulse_array);
                    })(BPM);

                    // find the lowest pulse rate and set it to lowest y point
                    chart1.yAxisMin = (function(array) {
                        var pulse_array = [];

                        for (var i = 0; i < array.length; i++) {
                            if (array[i] != null) {
                                pulse_array.push(array[i]);
                            }
                        }
                        return Math.min.apply(Math, pulse_array);
                    })(BPM);

                    // set our data series and create new chart
                    chart1.data.series[0].data = BPM;

                    chart = new Highcharts.Chart(chart1.data);
                    $('#container').css({
                        height: '400px'
                    });

                    chart1.data.series[0].addPoint(BPM, true, true);

                    // setTimeout(requestData, 3000);
                    console.log(chart1.data.series);
                }

            });
        }

        // give highcharts something to render to
        container = document.getElementById("container");

        chart1.data = {

            chart: {
                renderTo: container,
                type: 'spline',
                animation: Highcharts.svg, // don't animate in old IE
                marginRight: 10,
                events: {
                    load: requestData()
                }
            },
            title: {
                text: ' Real Time Pulse Analysis'
            },
            xAxis: {
                type: 'datetime',
                tickPixelInterval: 150
            },
            yAxis: {
                min: chart1.yAxisMin,
                max: chart1.yAxisMax,
                title: {
                    text: 'Heart Rate'
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
            tooltip: {
                formatter: function() {
                    return '<b>' + this.series.name + '</b><br/>' +
                        Highcharts.dateFormat('%H:%M:%S', this.x) + '<br/>' +
                        Highcharts.numberFormat(this.y, 2);
                }
            },
            legend: {
                enabled: false
            },
            exporting: {
                enabled: false
            },
            series: [{
                name: 'Beats Per Minute',
                data: []
            }]


        };

    });
});
</script>

</html>

Answer 1

您应该使用对图表的引用，然后调用addPoint，而不是引用图表配置对象。

正确表格：chart.series[0].addPoint()

为什么我的addPoint（）在我的highcharts代码中不被识别为函数？

1 个答案: