0

在我的页面中，我可以选择同时显示一个图表还是所有图表。当我选择要查看的所有图表时，就可以了。当我选择“图表 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>
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 回答