2017-04-04 12 views
0

未定義Highchartsのプロパティ「x軸」を読み込めません」 Uncaught TypeError: 'xAxis'が未定義のプロパティを読み取ることができず、同期も機能しません。キャッチされない例外TypeError:私はただそこにある問題は、チャートが表示されている<a href="http://jsfiddle.net/ZArZM/" rel="nofollow noreferrer">http://jsfiddle.net/ZArZM/</a></p> <p>この例のようにしかし、コンソールに、2つの以上のチャートから同期ズームをしよう

これは私のコードです。

 <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> 

アドバイス君?私はこだわっていると思う。ご清聴ありがとうございました。

+0

2番目のグラフのコードを貼り付けてコピーし、chart1をchart2に名前を変更していないようです。chart1.xaxxではchart1が未定義です –

答えて

0

これは、あなたの2つのチャートがajaxコール($.getJSON)内に設定されているために起こります。したがって、2つのチャートはお互いを知りません。オプションは、単一のajaxメソッド(または入れ子にされたajaxメソッド)で両方のチャートをラップすることです。これには独自の落とし穴があるかもしれませんが、チャートはお互いについて少なくとも「知っている」でしょう。

さらに別の方法として、チャートをajaxメソッドの外に定義し、データ呼び出しが成功したときにチャートをデータに更新するだけです。

0

Javascriptがあなたには、いくつかのオプションがあり 、あなたのグラフ1とchart2は機能のグローバルな原因の把握をvariabels知りませんでした:

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

かところであなたはhighstockない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 
    }] 
}); 
}); 
}); 
関連する問題

 関連する問題