Question

我在页面中使用jQuery animate（）来增加高图元素的大小。当我调用事件（双击）时，它没有任何变化。但如果按F11（全屏）或F12，它将受到影响。这是我的代码：

＆＃13;

$(function() {
  var random1 = [];
  var random2 = [];
  $('#today').dblclick(function() {
    $(this).children('.highcharts-container').css("zIndex", 1000);
    $(this).animate({
      opacity: '1',
      width: '1140px',
      height: '655px'
    }, 800, function() {
      alert('OK');
    });
  });
  for (i = 0; i < 1440; i += 10) {
    var temp = Math.floor((Math.random() * 250) + 1);
    random1.push(temp);
  }
  for (i = 0; i < 1440; i += 10) {
    var temp = Math.floor((Math.random() * 250) + 1);
    random2.push(temp);
  }
  var chart = {
    zoomType: 'xy'
  };

  var today_xAxis = {
    type: 'datetime',
    tickInterval: 3000000,
    labels: {
      formatter: function() {
        return Highcharts.dateFormat('%kh', this.value);
      },
      autoRotationLimit: 10,
      step: 3
    },
  };
  var today_yAxis = [{ // Primary today_yAxis
    min: 0,
    max: 250,
    tickAmount: 6,
    tickInterval: 50,
    labels: {
      format: '{value}',
      style: {
        color: Highcharts.getOptions().colors[1]
      }
    },
    title: {
      text: 'Température (°C)',
      style: {
        color: Highcharts.getOptions().colors[1],
        fontFamily: 'Trebuchet MS'
      }
    }
  }, { // Secondary today_yAxis
    min: 0,
    max: 250,
    tickAmount: 6,
    tickInterval: 50,
    title: {
      text: 'Température (°C)',
      style: {
        color: '#7CB5EC',
        fontFamily: 'Trebuchet MS'
      }
    },
    labels: {
      format: '{value}',
      style: {
        color: Highcharts.getOptions().colors[0]
      }
    },
    opposite: true
  }];
  var today_tooltip = {
    shared: true
  };
  var today_legend = {
    layout: 'vertical',
    align: 'left',
    x: 120,
    verticalAlign: 'top',
    y: 100,
    floating: true,
    backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
  };
  var today_series = [{
    name: 'Température (°C)',
    type: 'column',
    today_yAxis: 1,
    data: random1,
    pointStart: Date.UTC(2015, 9, 14, 0, 0),
    pointInterval: 10 * 60 * 1000,
    today_tooltip: {
      valueSuffix: ' kWh'
    }

  }, {
    name: 'Température (°C)',
    type: 'spline',
    data: random2,
    pointStart: Date.UTC(2015, 9, 14, 0, 0),
    pointInterval: 10 * 60 * 1000,
    today_tooltip: {
      valueSuffix: 'kWh'
    }
  }];

  var today_json = {};
  today_json.chart = chart;
  today_json.xAxis = today_xAxis;
  today_json.yAxis = today_yAxis;
  today_json.title = "";
  today_json.tooltip = today_tooltip;
  today_json.legend = today_legend;
  today_json.series = today_series;
  $('#today').highcharts(today_json);

});

＆＃13;

.block-content {
  float: left;
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 25px;
  margin-right: 10px;
  height: 340px;
  width: 550px;
  text-align: left;
}
.block-content-title {
  margin-top: 15px;
  margin-bottom: 10px;
  display: inline-block;
  width: 100%;
  height: 35px;
  line-height: 35px;
  border-bottom: 2px #FFFFFF solid;
  font-size: 15pt;
  font-family: Comfortaa;
}
.block-content-body div {
  height: 290px;
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script src="http://code.highcharts.com/highcharts.js"></script>

</head>

<body>
  <div class="block-content">

    <div class="block-content-body">
      <div id="today"></div>
    </div>
  </div>
</body>

</html>

＆＃13;

Answer 1

要调整图表大小，您应该使用chart.setSize（）或chart.reflow（），请参阅API。按F11 / 12后，您调整浏览器的文档（window.resize事件），该文档在结果调用Highcharts setSize（）内部。

Pawel Fus的评论。

Jquery .animate（）仅在按F11或F12后受影响

1 个答案: