遺漏的類型錯誤：無法讀取未定義Highcharts

我嘗試從以上兩個圖表作同步放大，就像在這個例子中http://jsfiddle.net/ZArZM/遺漏的類型錯誤：無法讀取未定義Highcharts

問題是圖表顯示，但在控制檯存在的特性「X軸」「 Uncaught TypeError：無法讀取'undefined'的屬性'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>

有什麼建議嗎？我認爲我卡住了。感謝您的關注。

來源

2017-04-04 MGP Mutiara Gaming production

看起來你複製粘貼第二個圖表的代碼，並沒有將chart1重命名爲chart2，您正在訪問chart1.xAxis，其中chart1未定義 –

發生這種情況是因爲您在ajax調用中設置了2個圖表（$.getJSON）。因此，這兩個圖表不瞭解對方。選項將包裝在一個單一的ajax方法（或嵌套ajax方法）你的圖表。這可能有其自己的陷阱，但是圖表至少會「彼此瞭解」。

還有一種選擇是在ajax方法之外定義圖表，並在數據調用成功後用數據更新圖表。

來源

2017-04-04 12:30:04 wergeld

的Javascript不知道你chart1和chart2 variabels全球引起其保持在一個函數，你有一些選擇：

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

來源

2017-04-06 10:22:11

遺漏的類型錯誤：無法讀取未定義Highcharts

回答

相關問題