Question

在我的页面中，我可以选择是否要在同一时间显示一个图表或所有图表。当我选择查看所有图表时，没关系。当我选择“图表a”时，没关系。当我选择“图表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>

Answer 1

如果您选择了选项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);
}

使用PHP在单个网页中管理多个高清图表

1 个答案: