Highchart: addSeries vs. chart.options.series

Question

Я унаследовал проект, который использует Highcharts.

Предыдущий dev использовал метод .addSeries, чтобы добавить все серии в каждый отображаемый график. Из того, что я читал в Highcharts, похоже, что .addSeries действительно для динамического добавления данных.

Данные, которые используются для заполнения диаграмм, поступают из запроса AJAX. Старый подход разработчика заключался в том, чтобы получить данные, отобразить диаграмму, а затем добавить серию, используя .addSeries. Я думал, что было бы лучше обновить options.series, а затем передать все это до new Highcharts.Chart() для рендеринга, взяв из формулы уравнение .addSeries.

Однако, поскольку я новичок в Highcharts, я надеялся получить некоторые отзывы о том, каким будет лучший метод.

Answer 1

Вы находитесь на хорошем пути, хотя ваш вопрос предполагает, что вы можете просто искать предпочтения по строгому правильному/неправильному ответу.

Из того, что я видел, если у вас нет взаимодействий на странице, что вызвало бы необходимость обновить график после его рисования, преимущество использования addSerie было бы добавить некоторую визуальную вспышку. Используя диаграммы addSerie, ваши диаграммы визуально нарисуют себя перед посетителем - они уже нарисованы. (Я считаю, что на демонстрационном сайте HighCharts есть несколько хороших примеров.)

Я также недавно унаследовал проект HighCharts и создаю новый Highcharts.Chart() с использованием динамических данных, анализируя данные AJAXed на лету. Хорошая новость заключается в том, что все диаграммы по-прежнему имеют приятную визуальную вспышку (блистание важно), поскольку они не рисуются до тех пор, пока данные AJAXed не будут полностью загружены. Этот фрагмент кода показывает, как я загрузки динамических диаграмм, анализ данных в формате JSON на лету:

$(function() { 
     var visitsChart; 
     $(document).ready(function() { 
      $.getJSON('/json-data-url', function(json){   
       var visitsChart = new Highcharts.Chart({ 
        chart: { 
         renderTo: 'visitsContainer', 
         type: 'spline', 
        }, 
        title: { 
         text: 'Test Widget' 
        }, 
        series: [{ 
         name: 'Speed', 
         data: [parseInt(json.visits)], 
        }], 
       ... 
       });  
      }); 
     }); 
    }); 

Я не буду лгать ... У меня было несколько минут таскание за волосы, когда я начинал, но теперь я жаль, что у меня было больше времени на работу с Highcharts, так как это весело, когда вы попадаете в рулон. Надеюсь это поможет.