2016-07-19 3 views
1

Эй, я использую библиотеку высоких диаграмм для введения графиков газов.Как повысить производительность в HighCharts

Я хочу повысить их производительность, чтобы каждый график мог обрабатывать более 50 000 точек на граф.

Я знаю, что я могу указать turboThreshold быть 1 миллион, и он будет работает штраф, но я замечаю новый модуль под названием boostjs из Highcharts, и я бы хотел бы использовать его, но я не знаю, как.

Это пример использования:

$(function() { 
 

 
    function getData(n) { 
 
     var arr = [], 
 
      i, 
 
      a, 
 
      b, 
 
      c, 
 
      spike; 
 
     for (i = 0; i < n; i = i + 1) { 
 
      if (i % 100 === 0) { 
 
       a = 2 * Math.random(); 
 
      } 
 
      if (i % 1000 === 0) { 
 
       b = 2 * Math.random(); 
 
      } 
 
      if (i % 10000 === 0) { 
 
       c = 2 * Math.random(); 
 
      } 
 
      if (i % 50000 === 0) { 
 
       spike = 10; 
 
      } else { 
 
       spike = 0; 
 
      } 
 
      arr.push([ 
 
       i, 
 
       2 * Math.sin(i/100) + a + b + c + spike + Math.random() 
 
      ]); 
 
     } 
 
     return arr; 
 
    } 
 
    var n = 500000, 
 
     data = getData(n); 
 

 

 
    console.time('line'); 
 
    $('#container').highcharts({ 
 

 
     chart: { 
 
      zoomType: 'x' 
 
     }, 
 

 
     title: { 
 
      text: 'Trimmed Highcharts drawing ' + n + ' points' 
 
     }, 
 

 
     subtitle: { 
 
      text: 'Using the experimental Highcharts Boost module' 
 
     }, 
 

 
     tooltip: { 
 
      valueDecimals: 2 
 
     }, 
 

 
     series: [{ 
 
      data: data, 
 
      lineWidth: 0.5 
 
     }] 
 

 
    }); 
 
    console.timeEnd('line'); 
 

 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.highcharts.com/highcharts.js"></script> 
 
<script src="https://code.highcharts.com/modules/boost.js"></script> 
 
<script src="https://code.highcharts.com/modules/exporting.js"></script> 
 

 
<div id="container" style="height: 400px; max-width: 800px; margin: 0 auto"></div>

Видимо мне не нужно делать что-либо ожидать добавления сценария после script.This highchart является странно, я был уверен, что я необходимо добавить какое-либо свойство в свойства графиков высоких диаграмм, чтобы включить этот режим повышения. Мне нужно объяснение по этому сценарию и как правильно его использовать?

+0

Короткий рассказ просто включает его, и он будет работать. Кажется, он просто переопределяет некоторые функции по умолчанию для высоких чартов, поэтому вместо них вызывается ускоренная версия. Я не понимаю его особенностей. – apokryfos

+0

спасибо ................................................ .............. мы можем закрыть эту тему. – Brk

+0

Если вы найдете более подробное объяснение в любом месте, вы можете просто ответить на свой вопрос. Я уверен, что в какой-то момент это поможет кому-то другому. – apokryfos

ответ

8

Во всех SVG основанных на графических решениях, включая HighCharts, производительность уменьшается после добавления пары сотен точек к диаграмме.

Процесс добавления столько объектов (точек) на основе диаграммы SVG требует времени и взаимодействия с пользователем с этими объектами (как значений, названия, подсказках и т.д.) чувствует себя медленно. Потому что существует ограничение на элементы SVG, которые вы можете добавить к DOM.

HTML5 canvas Технология не имеет таких ограничений. Но чистый раствор HTML5 холст не хватает силы SVGs как доступа DOM, резким рендеринга между различными экранами решений и т.д.

Так Highcharts инженеры сделали гибридное решение с использованием как SVG и HTML5 холст технологии. Они рисуют график на холсте HTML5, а затем копируют содержимое диаграммы в SVG.

Вот как работает HighChart's boost.js работает.