（浏览器错误在 Firefox 中有效，但没有其他问题） - 第二个 g.raphael 折线图未正确显示 y 或 x 轴答案

【问题标题】：(browser bug works in Firefox, but nothing else) - second g.raphael line chart not displaying y or x axis correctly（浏览器错误在 Firefox 中有效，但没有其他问题） - 第二个 g.raphael 折线图未正确显示 y 或 x 轴
【发布时间】：2014-02-12 22:13:26
【问题描述】：

我的问题是我有 2 个图表，第一个显示正确，第二个 y 轴偏离图表，x 轴不显示标签。我的控制台中没有 JQuery 或 javascript 相关错误。有什么建议吗？

编辑

我没有包含 HTML，因为我认为它无关紧要，但问题是图表位于引导选项卡内。这是针对类似情况的解决方法

编辑

<?php
$air_temp_qry = "SELECT Month(`dive_date`) AS Month, Year(`dive_date`) AS Year, AVG(`dive_air_temp`) FROM `log_dive_tbl` WHERE site_name='$site_name' GROUP BY Month(`dive_date`), Year(`dive_date`)";
$result = mysql_query($air_temp_qry);

$air_temp_array_2013 = array();
$air_month_array_2013 = array();

$air_temp_array_2014 = array();
$air_month_array_2014 = array();
$air_month_count_string = array();

if (mysql_num_rows($result) == 0) {

$air_month_array_2014[] = '"Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"';
}
 else{
while($row = mysql_fetch_array($result))
  {

      $month = $row[0];
      $year = $row[1];
      $avg = round($row[2]);

      if ($month == 1){$month = "'Jan'";}
      if ($month == 2){$month = "'Feb'";}
      if ($month == 3){$month = "'Mar'";}
      if ($month == 4){$month = "'Apr'";}
      if ($month == 5){$month = "'May'";}
      if ($month == 6){$month = "'Jun'";}
      if ($month == 7){$month = "'Jul'";}
      if ($month == 8){$month = "'Aug'";}
      if ($month == 9){$month = "'Sep'";}
      if ($month == 10){$month = "'Oct'";} 
      if ($month == 11){$month = "'Nov'";}
      if ($month == 12){$month = "'Dec'";}

      if ($year == 2013){
          $air_temp_array_2013[] = $avg.', ';
          $air_month_array_2013[] = $month.', ';
      }

      if ($year == 2014){
          $air_temp_array_2014[] = $avg.', ';
          $air_month_array_2014[] = $month.', ';
      }
  }
}

  $air_month_count_2014 = count($air_month_array_2014);
  $air_month_2014_length = array();
    foreach (range(0, $air_month_count_2014 -1)as $number) {
        $air_month_2014_length[] = $number.', ';
    }

  $air_month_count_string = implode($air_month_2014_length);
?>

Javascript

<script>
// AIR TEMP CHART
var air_temp_chart = Raphael("air_temp_chart_div",'100%', 300);
    xAxis = [<?php echo implode($air_month_array_2014); ?>];
    yData = [[<?php echo implode($air_temp_array_2014); ?>],[0,30]];  //   for 2013 insert ->     ,[<?php echo implode($water_temp_array_2013); ?>]
    options = {
        gutter: 20,
        symbol: "circle",
        nostroke: false,
        smooth: true,
        shade: true,
        colors: ['#120f44','transparent'],   // for extra year lines color  ->       '#555894','#006d8a'
        axis: "0 0 1 1",
        axisxstep: xAxis.length -1,
        axisystep: 1
    };
  var lines = air_temp_chart.linechart(1,1,640,290,[<?php echo $air_month_count_string; ?>],yData,options);
lines.hoverColumn(function() {
  this.tags = air_temp_chart.set();
  for ( var i = 0, ii = this.y.length; i < ii; i++) {
      tagDegree = i * 90 + 45;
      var nTag = air_temp_chart.popup(this.x, this.y[i],
              + this.values[i] + ' degs', 'right', 5);
      this.tags.push(nTag.insertBefore(this).attr([ {
          fill : "#006d8a"
      }, {
          fill : "#ffffff"
      } ]));
  }
  }, function() {
  this.tags && this.tags.remove();
   });
  //set text for x axis
  $.each(lines.axis[0].text.items, function(index, label) {
  this.attr("text", xAxis[index]);
  });
  lines.symbols.attr({
  r:5
  });
</script>

【问题讨论】：

标签： javascript browser charts raphael line

【解决方案1】：

我没有包含 HTML，因为我认为它无关紧要，但问题是图表位于引导选项卡内。这是针对类似情况的解决方法

http://yuilibrary.com/forum/viewtopic.php?f=92&t=9575&p=31081&hilit=chart+tab#p31081

【讨论】：