未捕获类型错误：无法读取未定义的高图表的属性'xAxis'

Question

我尝试从 2 个以上的图表进行同步缩放，就像在这个例子中一样 http://jsfiddle.net/ZArZM/

问题是图表显示，但在控制台中存在"未捕获的类型错误：无法读取未定义的属性'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 个图表。因此，这两个图表彼此不知道。选项是将两个图表包装在单个 ajax 方法(或嵌套 ajax 方法(中。这可能有自己的陷阱，但图表至少会"了解"彼此。

另一种选择是在 ajax 方法之外定义图表，并在成功调用数据后使用数据更新图表。

Answer 2

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

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

或使用

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

顺便说一句，你使用高股票而不是高图表只是在记事本中手动编辑，请尝试工作^^

$(document).ready(function() {
var chart1;
var chart2;
$.getJSON('http://sine.co.id/PHESIAK/laporan/getJSON.php?callback=?',  function(data) {
 chart1 = new Highcharts.StockChart({
   chart: {
     renderTo: 'container1',
   },

   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
   }]
 });
 });



$.getJSON('http://sine.co.id/PHESIAK/laporan/getJsonPres.php?callback=?', function(data1) {
 chart2 = new Highcharts.StockChart({
   chart: {
     renderTo: 'container2',
   },

   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
   }]
 });
});
});