未捕获的类型错误：无法读取未定义 Highcharts 的属性“xAxis”答案

【问题标题】：Uncaught TypeError: Cannot read property 'xAxis' of undefined Highcharts未捕获的类型错误：无法读取未定义 Highcharts 的属性“xAxis”
【发布时间】：2017-08-29 01:42:24
【问题描述】：

我尝试从超过 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>

有什么建议吗？我想我被困住了。感谢您的关注。

【问题讨论】：

您似乎复制粘贴了第二个图表的代码并且没有将chart1重命名为chart2，您正在访问chart1未定义的chart1.xAxis

标签： charts highcharts

【解决方案1】：

发生这种情况是因为您在 ajax 调用 ($.getJSON) 中设置了 2 个图表。因此，这 2 个图表彼此不了解。选项是将您的两个图表包装在一个 ajax 方法（或嵌套 ajax 方法）中。这可能有其自身的缺陷，但图表至少会相互“了解”。

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

【讨论】：

【解决方案2】：

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

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

或使用

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

顺便说一句，您使用的是 highstock 而不是 highcharts 刚刚在记事本中手工编辑，试试也许可以工作^^

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

【讨论】：