0

私のページには、同時に 1 つのグラフを表示するか、すべてのグラフを表示するかを選択するオプションがあります。表示するすべてのチャートを選択すると、問題ありません。「チャートa」を選択するとOKです。「チャート b」を選択すると、チャートが表示されません。

「チャートa」またはすべてのチャートを選択すると、両方のアラートが表示されることに注意してください。「チャート b」を選択すると、最初のアラートのみが表示されます。

私は何か間違ったことをしていますか？どんな助けでも大歓迎です。

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script>

<script type="text/javascript">
 $(document).ready(function() {
   Highcharts.setOptions({
    chart: {                            
      defaultSeriesType: 'spline',
    },
    xAxis: {
      type: 'datetime',         
    },        
  });

  var options1 = {
   chart: {
     renderTo: ''   
   },        
   series: []       
  };

  var options2 = {
   chart: {
     renderTo: ''   
   },    
   series: []       
  };

alert("chart1");
options1.series.push({name: "Temperatura",data: _VARS['data1'],lineWidth: 1,color: '#3e5bc1'});     
options1.chart.renderTo = 'chart_1';
var chart1 = new Highcharts.Chart(options1);

alert("chart2");
options2.series.push({name: "HR",data: _VARS['data2'],lineWidth: 1,color: '#3e5bc1'});          
options2.chart.renderTo = 'chart_2';
var chart2 = new Highcharts.Chart(options2);

});
</script>

</head>
<body>
<script>
  var _VARS = new Array();
  _VARS['data1'] = [[Date.UTC(2012,7,14,12,0),26.1],[Date.UTC(2012,7,14,13,0),27.2],[Date.UTC(2012,7,14,14,0),28],[Date.UTC(2012,7,14,15,0),28.4],[Date.UTC(2012,7,14,16,0),27.1],[Date.UTC(2012,7,14,17,0),27.2],[Date.UTC(2012,7,14,18,0),26.1],[Date.UTC(2012,7,14,19,0),24.8],[Date.UTC(2012,7,14,20,0),22.5],[Date.UTC(2012,7,14,21,0),21.3],[Date.UTC(2012,7,14,22,0),20.1],[Date.UTC(2012,7,14,23,0),19],[Date.UTC(2012,7,15,0,0),18.3]];
  VARS_AMBIENTE['data2'] = [[Date.UTC(2012,7,14,12,0),43],[Date.UTC(2012,7,14,13,0),44.1],[Date.UTC(2012,7,14,14,0),46.8],[Date.UTC(2012,7,14,15,0),49.3],[Date.UTC(2012,7,14,16,0),60.1],[Date.UTC(2012,7,14,17,0),57],[Date.UTC(2012,7,14,18,0),60.7],[Date.UTC(2012,7,14,19,0),69.5],[Date.UTC(2012,7,14,20,0),77.8],[Date.UTC(2012,7,14,21,0),80.5],[Date.UTC(2012,7,14,22,0),81.4],[Date.UTC(2012,7,14,23,0),83.1],[Date.UTC(2012,7,15,0,0),85.3]];
</script>

<h2>Choose Chart Test</h2>
<?php 
    // when i choose a, it's OK
    // when i choose b, it's NOT OK
    // when i choose c, it's OK


    //$param ="a";   
    $param ="b";    
    //$param ="c"; 

    if($param == 'a'){  
        echo "<p>chart a</p>
        <div id='chart_1'></div>";
    }elseif($param == 'b'){
        echo "<p>chart b</p> 
        <div id='chart_2'></div>";
    }else{
        echo "all charts\n";
        echo "<p>chart a</p><div id='chart_1' ></div></br></br>";
        echo "<p>chart b</p><div id='chart_2'></div></br></br>";
    }
?>
</body>
</html>
4

1 に答える 1

0

オプション b) を選択した場合の行:

var chart1 = new Highcharts.Chart(options1);

javascript でエラーが発生し、スクリプトの実行が停止します。Highcharts は chart_1 div を見つけることができず、エラーで終了します。オプション a) を選択すると、スクリプトは次の行を通過しますが、次の行で停止します。

var chart2 = new Highcharts.Chart(options2);

そして、あなたはこれにさえ気づきません。開発者ツール (Chrome または Firefox) をチェックインすると、javascript コンソールにエラーが表示されます。私はそれをやったし、状況 b) があり、エラー: Highcharts エラー #13: レンダリング div が見つかりません

それを正しく行うには、各 div が html に存在するかどうかを確認する必要があります。これには jQuery を使用してみてください。

alert("chart1");
options1.series.push({name: "Temperatura",data: _VARS['data1'],lineWidth: 1,color: '#3e5bc1'});     
options1.chart.renderTo = 'chart_1';
// checking if div#chart_1 exists
if ($("#chart_1").length > 0) {
    var chart1 = new Highcharts.Chart(options1);
}

alert("chart2");
options2.series.push({name: "HR",data: _VARS['data2'],lineWidth: 1,color: '#3e5bc1'});          
options2.chart.renderTo = 'chart_2';
// checking if div#chart_2 exists
if ($("#chart_2").length > 0) {
    var chart2 = new Highcharts.Chart(options2);
}
于 2013-02-10T23:38:38.667 に答える