用PHP在單個網頁中管理多個折線圖

在我的頁面中，我可以選擇是否在同一時間顯示一個圖表或所有圖表。當我選擇所有圖表查看時，沒關係。當我選擇「圖表a」時沒問題。當我選擇「圖表b」時，它沒有顯示任何圖表。用PHP在單個網頁中管理多個折線圖

我注意到，當我選擇「圖表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>

來源

2013-02-10 user1821227

當你選擇了選項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-10 23:38:38 sebast26

用PHP在單個網頁中管理多個折線圖

回答

相關問題