Question

我尝试从超过2个图表进行同步缩放，就像在此示例中http://jsfiddle.net/ZArZM/

问题是图表显示但是在控制台中有“未捕获的TypeError：无法读取未定义的属性'xAxis'，并且同步也不起作用。

这是我的代码。

        <script type="text/javascript">

        $(function () {
            var chart1;
            var chart2;


        $.getJSON('http://sine.co.id/PHESIAK/laporan/getJSON.php', function (data) {

        Highcharts.setOptions({
            global: {
                useUTC: false
            }
        });

        $(document).ready(function () {
                chart1 = new Highcharts.StockChart({
                    chart: {
                        renderTo: 'container',
                    },      


                title: {
                    text: 'Data Monitoring Uji Coba Fast',
                    style: {
                    color: 'black',
                    fontWeight: 'bold',
                    fontSize: '50px'
                }
                },

                subtitle: {
                    text: 'Temperature Sensor Well Head 81',
                    style: {
                    color: '#3366AA',
                    fontSize: '30px'
                    }
                },

                xAxis: {
                    gapGridLineWidth: 0,
                    events: {
                            afterSetExtremes: function (event) {
                                var xMin = event.min;
                                var xMax = event.max;
                                var ex = chart2.xAxis[0].getExtremes();


                                if (ex.min != xMin || ex.max != xMax) chart2.xAxis[0].setExtremes(xMin, xMax, true, false);
                            }
                        }
                },

                rangeSelector: {
                    buttons: [{
                        type: 'hour',
                        count: 1,
                        text: '1h'
                    }, {
                        type: 'day',
                        count: 1,
                        text: '1D'
                    }, {
                        type: 'all',
                        count: 1,
                        text: 'All'
                    }],
                    selected: 1,
                    inputEnabled: false
                },

                series: [{
                    name: 'Fahrenheit',
                    type: 'area',
                    data: data,
                    gapSize: 5,
                    tooltip: {
                        valueDecimals: 2
                    },
                    fillColor: {
                        linearGradient: {
                            x1: 0,
                            y1: 0,
                            x2: 0,
                            y2: 1
                        },
                        stops: [
                            [0, '#003399'],
                            [1, '#3366AA']
                        ]
                    },
                    threshold: null
                }]
            });
        });
        });
        });
                </script>


        <script type="text/javascript">

        $.getJSON('http://sine.co.id/PHESIAK/laporan/getJsonPres.php', function (data1) {


        Highcharts.setOptions({
            global: {
                useUTC: false
            }
        });

        $(document).ready(function () {
                chart2 = new Highcharts.StockChart({
                    chart: {
                        renderTo: 'container1',
                    },  


                title: {
                    text:  ''
                },

                subtitle: {
                    text: 'Pressure Sensor Well Head 81',
                    style: {
                    color: '#D43346',
                    fontSize: '30px'
                    }
                },

                xAxis: {
                    gapGridLineWidth: 0,

                    events: {
                            afterSetExtremes: function (event) {
                                var xMin = event.min;
                                var xMax = event.max;
                                var ex = chart1.xAxis[0].getExtremes();


                                if (ex.min != xMin || ex.max != xMax) chart1.xAxis[0].setExtremes(xMin, xMax, true, false);
                            }
                        }
                },

                rangeSelector: {
                    buttons: [{
                        type: 'hour',
                        count: 1,
                        text: '1h'
                    }, {
                        type: 'day',
                        count: 1,
                        text: '1D'
                    }, {
                        type: 'all',
                        count: 1,
                        text: 'All'
                    }],
                    selected: 1,
                    inputEnabled: false
                },

                series: [{
                    name: 'PSI',
                    type: 'area',
                    data: data1,
                    gapSize: 5,
                    tooltip: {
                        valueDecimals: 2
                    },
                    fillColor: {
                        linearGradient: {
                            x1: 0,
                            y1: 0,
                            x2: 0,
                            y2: 1
                        },
                        stops: [
                            [0, '#ad1a2c'],
                            [1, '#D43346']
                        ]
                    },
                    threshold: null
                }]
            });
        });
        });
                </script>

任何建议人员？我想我被卡住了。谢谢你的关注。

Answer 1

这种情况正在发生，因为您在ajax调用（$.getJSON）中设置了2个图表。因此，2个图表彼此不了解。选项是将两个图表包装在单个ajax方法（或嵌套的ajax方法）中。这可能有自己的陷阱，但是图表至少会知道＆＃34;关于彼此。

另一个选择是在ajax方法之外定义图表，只需在成功调用数据时用数据更新图表。

Answer 2

Javascript不知道你的chart1和chart2变量全局导致它在函数中保持不变，你有一些选择：

'Network routing 21,5\" 4,8GHz1TB hddQwerty'

或使用

1: 
var chart1 = $('#container').highcharts();
var chart2 = $('#container1').highcharts();

你使用highstock而不是highcharts 只是在记事本中手工编辑，尝试也许工作^^

2:
$('#container').highcharts().xAxis[0].setExtremes
$('#container1').highcharts().xAxis[0].setExtremes

未捕获的TypeError：无法读取未定义的Highcharts

2 个答案: