在动态添加yAxis时，Highcharts性能较低

1 回答

• 0

  在这种情况下，您可以通过一个技巧显着提高性能：当执行多个连续操作时，每个操作都需要重绘（添加系列，添加轴，更新轴高度），在您告知Highcharts所有操作之前不要重绘 .

  在我的机器上，这可以将添加轴功能的性能提高5x-6x . 请参阅下面的代码和评论 .

  var chart;
  var index = 2;
  
  var groupingUnitsD = {units:[['day',[1]]], enabled:true};
  var groupingUnitsWM = [[
          'week',                         // unit name
          [1]                             // allowed multiples
      ], [
          'month',
          [1, 2, 3, 4, 6]
      ]];
  
  $(function () {
    var ohlc = [];
    
    $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-ohlcv.json&callback=?', function (data) {
  
      // split the data set into ohlc 
      var volume = [],
      dataLength = data.length,
      
      i = 0;
  
      for (i; i < dataLength; i++) {
        ohlc.push([
            data[i][0], // the date
            data[i][1], // open
            data[i][2], // high
            data[i][3], // low
            data[i][4] // close
        ]);
      }
      
      loadChart(data);
      });
      
      
      function loadChart(cdata){
        console.time("chart load");
        var highchartOptions = {
          plotOptions:{
            line: {
                enableMouseTracking: true,
                animation: false,
                marker: {
                    enabled: false
                }
            },
            series:{
          	  cursor: 'pointer',
            }
          },
          chart:{
            alignTicks: false,
            events: {
              load: function () {
                console.timeEnd("chart load");
              }
            },
            renderTo:'container'
          },
          yAxis:[{
            title:{
              text:"initial data"
            },
            id:'myaxis-1',
            height:'14%',
            top:'0%'
          }],
  
          series: [{
            data: cdata,
            turboThreshold:0,
            dataGrouping:groupingUnitsD
          }]
        };
        chart = new Highcharts.StockChart(highchartOptions);
      }
    
    
    
    
      $button = $('#button');
      $delButton = $('#delbutton');
      
      $button.click(function () {
        var startTime = new Date().getTime();
            var axisObj = {
              title: {
                  text: "axis-" + index,
              },
              id:'myaxis-'+ index
            };
        chart.addAxis(axisObj, false, false);    // don't redraw yet
        console.log("Added axis:" + 'myaxis-'+ index);
        $('#axisList').append($('<option></option>').text('myaxis-'+ index));
        var seriesData = new Object();
        seriesData.name = 'axis-' + index;
        seriesData.id = 'myaxis-' + index;
        seriesData.yAxis = 'myaxis-'+ index;
        seriesData.data = ohlc;
        seriesData.type = 'line';
        seriesData.dataGrouping = groupingUnitsD;
        chart.addSeries(seriesData, false);      // don't redraw yet
        updateAxisHeight(false);                 // don't redraw yet
        index++;
  
        // finally, redraw now
        chart.redraw();
  
        var endTime = new Date().getTime();
        console.log("add axis took " + (endTime - startTime) + " msec");
      });
      
      
    $delButton.click(function () {
    
      var $select = $('#axisList');
      console.log($select.val());
      console.log(chart.get($select.val()));
      var selId = $select.val();
      
      chart.get(selId).remove();
       $('option:selected', $select).remove();
      var i=0;
      updateAxisHeight();
    });
    
    updateAxisHeight = function(redraw){
      // set redraw to true by default, like Highcharts does
      if (typeof redraw === 'undefined') {
        redraw = true;
      }
    
      var i=0;
      $("#axisList > option").each(function() {
          // don't redraw in every iteration
          chart.get(this.value).update({ height: '14%',top: (i*15) + '%',offset:0 }, false);
          i++;
      });
  
      // redraw if caller asked to, or if the redraw parameter was not specified
      if (redraw) {
        chart.redraw();
      }
    }
    
    
    
  
  });
  

  <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
      <script src="http://code.highcharts.com/stock/highstock.js"></script>
      <script src="http://code.highcharts.com/stock/highcharts-more.js"></script>
      <script src="http://code.highcharts.com/modules/exporting.js"></script>
  
  <button id="button" class="autocompare">Add yAxis</button><br>
  <!--Entrt yAxis index to delete:<input type='text' id="delAxis"/> -->
  
  <select id="axisList" name="axisList">
    <option value="myaxis-1" selected="selected">myaxis-1</option>
  </select>
  
  
  <button id="delbutton" class="autocompare">Delete yAxis</button>
  <div id="container" style="height: 800px"></div>
  

  回复于 2024-05-14T08:11:38+08:00